CSV-js:用 JavaScript 编写的 CSV

1.CSV-js:用 JavaScript 编写的 CSV展示一下调用后的效果生成一个两列列表

2.下面是实现方法

 const tableToExcel = (JsonData: any) => {
    const data = [
      [
        { label: '日期', value: 'Zhou Maomao' },
        { label: '结算周期', value: '1810000000' },
        { label: '客户名称', value: 'Zhou Maomao' },
        { label: '服务提供商', value: '1810000000' },
        { label: '开户银行', value: 'HangzhouZhejiang' },
        { label: '联系人', value: 'Zhou Maomao' },
        { label: '联系电话', value: '1810000000' },
        { label: '开户地址', value: 'HangzhouZhejiang' },
        { label: '联系电话', value: 'Zhou Maomao' },
        { label: '企业名称', value: 'HangzhouZhejiang' },
        { label: '邮箱', value: '1810000000' },
        { label: '银行账号', value: 'HangzhouZhejiang' },
      ],
    ];

    const columnCount = 12;
    const rowCount = data.length;

    let csv = '';

    // Add headers
    for (let i = 0; i < columnCount; i++) {
      csv += `${data[0][i].label},`;
    }
    csv += '\n';

    // Add data rows
    for (let i = 0; i < rowCount; i++) {
      for (let j = 0; j < columnCount; j++) {
        csv += `${data[i][j].value},`;
      }
      csv += '\n';
    }

    // 要导出的json数据
    // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = `项目编号,项目名称,访谈主题,访谈类型,专家名称,公司名称,职位,客户费率,收费时长（分钟）,应收金额（含税)\n`; // 增加\t为了不让表格显示科学计数法或者其他格式;
    for (let i = 0; i < JsonData.length - 1; i++) {
      for (const key in JsonData[i]) {
        const JsonDateLastField = Object.keys(JsonData[i])[Object.keys(JsonData[i]).length - 1];
        if (key !== 'id') {
          if (key === JsonDateLastField) {
            str += `${JsonData[i][key] + '\t'}`;
          } else {
            str += `${JsonData[i][key] + '\t'},`;
          }
        }
      }
      str += '\n';
    }
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(`${csv}+${str}`);
    // 通过创建a标签实现
    const link = document.createElement('a');
    link.href = uri;
    // 对下载的文件命名
    link.download = 'json数据表.csv';
    link.click();
  };

3.测试数据

const defaultData: DataSourceType[] = new Array(6).fill(1).map((_, index) => {
  return {
    id: (Date.now() + index).toString(),
    a: `活动名称${index}`,
    b: '新能源',
    c: 'open',
    d: '1590486176000',
    e: '新能源',
    f: '新能源',
    g: '新能源',
    h: '新能源',
    i: '新能源',
    j: '新能源',
  };
});

4.调用

tableToExcel(dataSource);