纯前端下载 csv 格式文件

原创已于 2022-09-30 17:02:41 修改 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-07-22 16:20:45 首次发布

javaScript 专栏收录该内容

30 篇文章

订阅专栏

该博客介绍了如何在前端实现CSV文件的下载功能。通过提供数据和表头，利用JavaScript创建并下载CSV文件。示例代码展示了从数据到CSV格式转换的过程，并通过创建HTML的a标签触发文件下载。此方法适用于前端数据导出场景。

纯前端下载 csv 文件

table 数据

data() {
  return {
    header: [
      {
        _id: '01',
        label: '姓名',
        prop: 'name',
      },
      {
        _id: '02',
        label: '电话',
        prop: 'tel',
      },
      {
        _id: '03',
        label: '邮箱',
        prop: 'email',
      }
    ]
	tableData: [
	  {
	    name: 'jack',
	    tel: '0000-000000',
	    email: 'jack@xx.com'
	  },
	  {
	    name: 'mark',
	    tel: '0000-111111',
	    email: 'mark@xx.com'
	  }
	]
  }
}

下载 csv 文件函数

function downloadCsv(header, data, fileName = "导出结果.csv") {
  if (!header || !data|| !Array.isArray(header) || !Array.isArray(data) || !header.length || !data.length) {
    return;
  }
  // 下面 blob 位置指定了文件格式，在此处就不需要再指定了
  // var csvContent = '';
  var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
  const _header = header.map(h => h.label).join(",");
  const keys = header.map(item => item.prop);
  csvContent += _header + '\r\n';
  data.forEach((item, index) => {
    let dataString = '';
    for (let i = 0; i < keys.length; i++) {
      dataString += item[keys[i]] + ','
    }
    csvContent += index < data.length ? dataString.replace(/,$/, '\r\n') : dataString.replace(/,$/, '');
  });
  // 使用编码转换包
  // import Encoding from 'encoding-japanese'
  // 安装：npm i encoding-japanese
  
  // const unicodeArray = Encoding.stringToCode(csvContent)
  // const sjisArray = Encoding.convert(unicodeArray, {
  //   to: 'SJIS',
  //   from: 'UNICODE'
  // })
  // const UintArray = new Uint8Array(sjisArray);
  // const blobUrl = new Blob([UintArray], {type: 'text/csv'});

  //  console.log(csvContent);
  const a = document.createElement('a');
  a.href = URL.createObjectURL(csvContent);
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(csvContent);
}