Vue项目导出数据到csv文件

使用到的插件

papaparse

安装依赖包

npm install papaparse

注意事项

首先，导出的数据一定得是一个列表，一个对象列表，例如：

dataList: [
        {
          name: "红木",
          type: "P000001",
          price: "￥88888"
        },
        {
          name: "水杉",
          type: "P000002",
          price: "￥2000"
        }
      ]

写一个按钮，点击按钮的时候把数据导出csv文件：

<el-button type="primary"   @click="exportCsv()">导出指令</el-button>

点击按钮调用 exportCsv 方法，首先在script里面引用一下库

  import Papa from 'papaparse'

接下来是 exportCsv 方法的实现：

exportCsv(){
  var csv = Papa.unparse(this.itemList); 
  //定义文件内容，类型必须为Blob 否则createObjectURL会报错
  let content = new Blob([csv]);
  //生成url对象
  let urlObject = window.URL || window.webkitURL || window;
  let url = urlObject.createObjectURL(content);
  //生成<a></a>DOM元素
  let el = document.createElement("a");
  //链接赋值
  el.href = url;
  el.download = "文件导出.cvs";
  //必须点击否则不会下载
  el.click();
  //移除链接释放资源
  urlObject.revokeObjectURL(url);
},

如此便可以了！！