前端生成csv文件并下载

JavaScript学习, 遇到的问题集合 本文总阅读量次

工作中遇到需要前端自己生成csv文件并下载的需求，记录下

功能背景

  • 导出错误原因的时候由前端把错误原因作为csv文件导出
  • 注意： csv文件像表格，但无法规定加粗/颜色

关键

  • 通过createElement("a")创建a标签，download属性决定下载的文件名xxx.csv，href属性决定文件内容'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)，str为文件内容
  • 逗号分隔符会自动换格子
  • \n换行
  • 增加\t为了不让表格显示科学计数法或者其他格式（不是用tab换格子）

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// failOrderList为后端返回的错误数据数组
let str = '平台商品编码,失败原因\n';
//增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < failOrderList.length; i++) {
  str += failOrderList[i].platFormGoodsCode + '\t' + ',';
  // 错误原因里的逗号为了不被识别为分隔符，需要转为中文逗号
  str += failOrderList[i].failMsg.replace(/,/g,'，') + '\t' + ',';
  str += '\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "错误结果.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

下载结果

  • 最终得到 错误结果.csv 文件，内容是类似下面的效果，但是表头没有加粗
平台商品编码 失败原因
xxx xxx，xxx
xxx xxx，xxx
JavaScript学习, 遇到的问题集合