前端vue使用js-xlsx導出excel的三種方法

npm install --save xlsx file-saver

在組件里面引入

 import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

第一種 其中#outTable是在el-table上定義的id

exportExcel() {
      var xlsxParam = { raw: true };//轉換成excel時，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable為列表id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
}

第二種 通過數組導出excel

      var _data = [

        [ "id",    "name", "value" ],

        [    1, "sheetjs",    7262 ],

        [    2, "js-xlsx",    6969 ]

      ];
      const ws= XLSX.utils.aoa_to_sheet(_data);

      /* generate workbook and add the worksheet */
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

第三種通過json導出excel

exportExcel() {

var wopts = {

 bookType: 'xlsx', bookSST: true, type: 'binary' }; var workBook = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} }; var table = []; for(var i=0;i<this.multipleSelection.length;i++){ var params = { 姓名: this.multipleSelection[i].name, 部門: this.multipleSelection[i].department, 職務名稱: this.multipleSelection[i].titles, 檔案編號:this.multipleSelection[i].fileNum, 校驗狀態:this.multipleSelection[i].verifyStatus, 審核狀態:this.multipleSelection[i].checkedStatus, 備注:this.multipleSelection[i].checkedReason, } table[i] = params }; //1、XLSX.utils.json_to_sheet(data) 接收一個對象數組並返回一個基於對象關鍵字自動生成的“標題”的工作表，默認的列順序由使用Object.keys的字段的第一次出現確定 //2、將數據放入對象workBook的Sheets中等待輸出
      workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table); //3、XLSX.write() 開始編寫Excel表格 //4、changeData() 將數據處理成需要輸出的格式
      FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), "sheetjs.xlsx") }, changeData(s) { //如果存在ArrayBuffer對象(es6) 最好采用該對象
    if (typeof ArrayBuffer !== 'undefined') { //1、創建一個字節長度為s.length的內存區域
      var buf = new ArrayBuffer(s.length); //2、創建一個指向buf的Unit8視圖，開始於字節0，直到緩沖區的末尾
      var view = new Uint8Array(buf); //3、返回指定位置的字符的Unicode編碼
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; } },

第三種適合導出選中的數據如果選中的json數據字段都是你需要的可以用下面的方法導出

const workSheet =
  XLSX.utils.json_to_sheet(this.multipleSelection, {
    header: ['列1', '列2', '列3', '列1', '列2', '列3', '列1', '列2'],
    skipHeader: true// 跳過上面的標題行
  });
const ws = XLSX.utils.aoa_to_sheet(workSheet);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

/* save to file */
XLSX.writeFile(wb, 'SheetJS.xlsx');