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);
},

如此便可以了！！