React导出复杂csv文件

---

一、背景

公司运营同学需要把charts图表数据导出csv文件.

二、需要实现的效果

三、解决

1.数据源

const searchDataList = [
    {
        "click_pv": 338,
        "trans_pv": 3,
        "mrtr_uv": 0,
        "trans_uv": 1,
        "trans_fee": 0,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 298,
        "index": "174751",
        "click_uv": 218,
        "ctr_pv": 0.43,
        "ttr_uv": 0,
        "expose_uv": 8914,
        "detail_visit_uv": 186,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211208",
        "expose_pv": 78883,
        "detail_read_pv": 0,
        "ctr_uv": 2.45
    },
    {
        "click_pv": 310,
        "trans_pv": 0,
        "mrtr_uv": 0,
        "trans_uv": 0,
        "trans_fee": 0,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 251,
        "index": "174751",
        "click_uv": 197,
        "ctr_pv": 0.39,
        "ttr_uv": 0,
        "expose_uv": 9099,
        "detail_visit_uv": 159,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211209",
        "expose_pv": 79154,
        "detail_read_pv": 0,
        "ctr_uv": 2.17
    },
    {
        "click_pv": 466,
        "trans_pv": 0,
        "mrtr_uv": 0,
        "trans_uv": 0,
        "trans_fee": 0,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 346,
        "index": "174751",
        "click_uv": 237,
        "ctr_pv": 0.53,
        "ttr_uv": 0,
        "expose_uv": 9436,
        "detail_visit_uv": 197,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211210",
        "expose_pv": 87639,
        "detail_read_pv": 0,
        "ctr_uv": 2.51
    },
    {
        "click_pv": 396,
        "trans_pv": 1,
        "mrtr_uv": 0,
        "trans_uv": 1,
        "trans_fee": 39,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 270,
        "index": "174751",
        "click_uv": 218,
        "ctr_pv": 0.42,
        "ttr_uv": 0,
        "expose_uv": 10570,
        "detail_visit_uv": 174,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211211",
        "expose_pv": 93232,
        "detail_read_pv": 0,
        "ctr_uv": 2.06
    },
    {
        "click_pv": 399,
        "trans_pv": 0,
        "mrtr_uv": 0,
        "trans_uv": 0,
        "trans_fee": 0,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 290,
        "index": "174751",
        "click_uv": 240,
        "ctr_pv": 0.42,
        "ttr_uv": 0,
        "expose_uv": 10437,
        "detail_visit_uv": 200,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211212",
        "expose_pv": 94194,
        "detail_read_pv": 0,
        "ctr_uv": 2.3
    },
    {
        "click_pv": 462,
        "trans_pv": 17,
        "mrtr_uv": 0,
        "trans_uv": 1,
        "trans_fee": 3,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 357,
        "index": "174751",
        "click_uv": 256,
        "ctr_pv": 0.45,
        "ttr_uv": 0,
        "expose_uv": 9390,
        "detail_visit_uv": 225,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211213",
        "expose_pv": 101737,
        "detail_read_pv": 0,
        "ctr_uv": 2.73
    },
    {
        "click_pv": 527,
        "trans_pv": 0,
        "mrtr_uv": 0,
        "trans_uv": 0,
        "trans_fee": 0,
        "drtr_uv": 0,
        "ttr_pv": 0,
        "detail_visit_pv": 413,
        "index": "174751",
        "click_uv": 304,
        "ctr_pv": 0.48,
        "ttr_uv": 0,
        "expose_uv": 9539,
        "detail_visit_uv": 269,
        "drtr_pv": 0,
        "detail_read_uv": 0,
        "mrtr_pv": 0,
        "date": "20211214",
        "expose_pv": 109622,
        "detail_read_pv": 0,
        "ctr_uv": 3.19
    }
]

<Button type="primary" onClick={() => exportCSV()}>
     导出CSV
</Button>

// 导出CSV文件 --- S
  const exportCSV = () => {
    if (!searchDataList) return;
    const allTypes = ['click_pv', 'click_uv', 'expose_pv', 'expose_uv', 'ctr_pv', 'ctr_uv',
      'drtr_pv', 'drtr_uv', 'mrtr_pv', 'mrtr_uv', 'ttr_pv', 'ttr_uv', 'trans_fee'];
    const ctrCsvStr = allTypes
      .map(type => createSingleCsv(type, searchDataList))
      .map(csvTable => toCsvStr(csvTable))
      .join('\n\n')
    doExport(ctrCsvStr);
  };
  const toCsvStr = (csvTable) => {
    return csvTable.map(line => line.join(',')).join('\n');
  }
  const createSingleCsv = (type, source) => {
    const header = buildHeader(type, source)
    const body = source.map(() => buildSingleLine(type, source)).filter(v => v);
    return [header, body[0]];
  }
  const buildHeader = (type, lineData) => {
    return [type, ...lineData.map(item => item.date)];
  }
  const buildSingleLine = (type, source) => {
    if (!source.length) return;
    return [source[0].index, ...source.map(item => item[type])]
  }
  const doExport = (csvStr) => {
    const blob = new Blob(["\uFEFF" + csvStr], { type: 'text/csv;charset=gb2312;' });
    const a = document.createElement('a');
    a.download = `${adName}-${ad}.csv`;
    a.href = URL.createObjectURL(blob);
    a.click();
  }
  // 导出CSV文件 --- E

四、效果