前端導出表格，且帶邊框樣式

背景：
我的項目用的是iview-admin2.0框架，裏面將iview進行了升級，而且表格裏用到了fiexd，對特殊的列進行了浮動。

需求是要求前端進行表格導出，而且要帶邊框。

用到了如下技術；
import FileSaver from “file-saver”;

import XLSX from “xlsx”;

import xlsxStyle from “xlsx-style”;

import XSU from “./xlsxStyle.utils”;

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

步驟如下：

1.直接npm 分別安裝 FileSaver、XLSX、xlsxStyle

FileSaver、XLSX、xlsxStyle可以直接npm；

XSU是git上下載下來的靜態資源（https://github.com/Ctrl-Ling/XLSX-Style-Utils），別人封裝的方法。
此處不詳細貼代碼了；

import XLSX from “xlsx-style”

2.我新增加了一個tool.js
在這個js裏
import FileSaver from “file-saver”;
import XLSX from “xlsx”;
import xlsxStyle from “xlsx-style”;
import XSU from “./xlsxStyle.utils”;

引入第三個xlsx-style的時候會報錯：
This relative module was not found: ./cptable in ./node_modules/[email protected]@xlsx-style/dist/cpexcel.js
需要修改源碼：
在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;（不要因爲亂碼就不往下了，往下翻）

第四個就是從上面說到的靜態資源的鏈接裏down的資源，將裏面的xlsxStyle.utils.js放到本地的文件夾裏，tool.js 這裏要能引到。
我這邊放在了同級別目錄下；

當然，xlsxStyle.utils.js 文件最下面
別忘了添加 export default XSU;

3.tool.js裏添加方法，可以多處導出使用
方法如下：

export const exportExcel = (function (id,name) {
  return new Promise((resolve, reject) => {
    /* 從表生成工作簿對象 */
    //  判斷要導出的節點中是否有fixed的表格，如果有，轉換excel時先將該dom移除，然後append回去，
    let fix = document.querySelector('.ivu-table-fixed-right');
    let wb 
    if (fix) {
      document.querySelector('#' + id).children[0].removeChild(fix);
      wb = XLSX.utils.table_to_book(document.querySelector('#' + id));
      document.querySelector('#' + id).children[0].appendChild(fix);
    } else {
      wb = XLSX.utils.table_to_book(document.querySelector('#' + id));
    }
    var sheetName = wb.SheetNames[0];
    for (let key in wb.Sheets.Sheet1) {
      if (Object.prototype.toString.call(wb.Sheets.Sheet1[key]) === '[object Object]'){
          wb.Sheets.Sheet1[key].v = wb.Sheets.Sheet1[key].v.toString().replace(/\s+/g, "");
          //我的表格裏針對fixed屬性的一列，不需要導出，沒有想到別的好的辦法，就直接置空了。我用這個方法導出時，在表達的最下面一行會有'暫無篩選結果'，沒有找到原因，所以也直接置空。
          if (wb.Sheets.Sheet1[key].v == '暫無篩選結果' || wb.Sheets.Sheet1[key].v == '修改' || wb.Sheets.Sheet1[key].v == '管理' || wb.Sheets.Sheet1[key].v== '操作') {
            wb.Sheets.Sheet1[key].v = ''
          }else {
          //置空的表格的單元格不需要增加邊框，故else的時候給單元格增加邊框
            XSU.setBorderDefault(wb, sheetName, key)
          }
      }
    }
    var wbout = xlsxStyle.write(wb, {
      bookType: "xlsx",
      bookSST: false, 
      type: 'binary'
    });
    try {
      FileSaver.saveAs(
        //Blob 對象表示一個不可變、原始數據的類文件對象。
        //Blob 表示的不一定是JavaScript原生格式的數據。
        //File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
        //返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。
        new Blob([s2ab(wbout)], {
          type: ""
        }),
        //設置導出文件名稱
        name + ".xlsx"
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, wbout);
    }
    resolve(wbout)
  })
})

在導出方法裏還用到了 s2ab的方法，直接在該方法的上面添加即可；

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i)
    view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

截圖如下：

最後步驟：
在你要用到的組件裏
// 引入導出Excel表格

import { exportExcel } from "@/libs/tools";

methods裏寫到：

exportExcel() {
      exportExcel("out-table", "項目推進情況");
    },

PS:
主要是要表格邊框，如果不要邊框的話就比較簡單，幾行代碼就搞定了。
如有更簡單或者其他好的方法，希望可以留言。

靈感來自以下：
https://www.cnblogs.com/lvsk/p/11970747.html
https://github.com/Ctrl-Ling/XLSX-Style-Utils
https://github.com/SheetJS/sheetjs