vue导出csv文件 （通过json2csv前端导出）


第一步：安装依赖

1
npm install json2csv  -s

第二步：代码实现

下载方式 ：
IE浏览器 不支持a标签进行下载，会打开url 故
对于微软系浏览器（IE和Edge）和非微软系列浏览器采用两种不同的方式进行下载
IE和Edge 采用了 navigator.msSaveBlob 方法 此方法为IE10及以上特有，IE10以下勿采用
非微软浏览器 使用a标签的click事件进行下载
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
rows: [
  {
    title: '序号',
    key: 'Ordinal',
    align: 'center'
  },
  {
    title: '产品编号',
    key: 'ProductNo',
    align: 'left'
  }
],
fields: ['title','key','align']
download(){
  try {
    const result = json2csv.parse(rows, {
      fields: fields,
      excelStrings: true
    });
    if (this.MyBrowserIsIE()) {
      // IE10以及Edge浏览器
      var BOM = "\uFEFF";
              // 文件转Blob格式
      var csvData = new Blob([BOM + result], { type: "text/csv" });
      navigator.msSaveBlob(csvData, `a.csv`);
    } else {
      let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
      // 非ie 浏览器
      this.createDownLoadClick(csvContent, `a.csv`);
    }
  } catch (err) {
    alert(err);
  }
},
//创建a标签下载
createDownLoadClick(content, fileName) {
  const link = document.createElement("a");
  link.href = encodeURI(content);
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
},
// 判断是否IE浏览器
MyBrowserIsIE() {
  let isIE = false;
  if (
    navigator.userAgent.indexOf("compatible") > -1 &&
    navigator.userAgent.indexOf("MSIE") > -1
  ) {
    // ie浏览器
    isIE = true;
  }
  if (navigator.userAgent.indexOf("Trident") > -1) {
    // edge 浏览器
    isIE = true;
  }
  return isIE;
},

导出文件格式：
在这里插入图片描述

参考链接：vue实现通用导出（excel，csv, pdf文件）组件 前端导出