reactjs前端資料導出

本篇總結了reactjs項目中将表格資料導出為csv檔案的方法。

引用插件：

或

（file-saver git位址：https://github.com/eligrey/FileSaver.js ）

使用插件導出檔案

//引用插件
import FileSaver from 'file-saver';

//方法調用
exportList = (data) => {
    //str:table的每一列的标題，即為導出後的csv檔案的每一列的标題
    let str = '标題1,标題2,标題3';
    //通過循環拿出data資料源裡的資料，并塞到str中
    for (const i in data) {
      str += '\n' + data[i].name + ',' +
        data[i].id + ',' +
        data[i].type
    }
    //Excel打開後中文亂碼添加如下字元串解決
    let exportContent = "\uFEFF";
    let blob = new Blob([exportContent + str], {
      type: "text/plain;charset=utf-8"
    });
    FileSaver.saveAs(blob, "List.csv");
  };