vue中使用js-xlsx導出excel文件（可以修改樣式）

前端vue中使用js-xlsx導出excel文件（可以修改樣式）

使用js-xlsx是因為有個需求是要把用戶上傳的xmind文件轉excel文件導出，當時有點懵，在網上找了許多資料發現了前端有如下幾種方法可導出excel文件 （方法有許多但原理都是一樣的）

1.通過js的Blob與Object URL把html表格直接導出 參考此處

注意：只能導出為xls格式的excel文件，且實際導出的就是一個html文檔。
但是因為導出的是html所以就可以在保留html表格原有的樣式了。

2.使用ActiveXObject對象來創建excel文件寫入數據導出 參考此處

注意：只能在ie下使用因為只有ie下有ActiveXObject對象

3.使用jquery的tabletoexcle.js庫來導出 參考此處

4.使用js-xlsx來導出excel文件修改樣式需要使用xlsx-style

vue中使用xlsx的詳細步驟

• 安裝xlsx插件 （需要修改樣式的話安裝xlsx-style）

$ npm install --save xlsx
$ npm install --save xlsx-style

• 在需要使用的vue文件中引入

import XLSX from "xlsx"

如果引入xlsx-style的話可能會報錯：
This relative module was not found:
./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
我也不知道是啥問題一引入就報錯 有點搞不懂 （有大佬知道可以回復下(*^_^*)）

后面找到原因了…: 是因為 在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 這里的require("./cptable") 其實沒有這個文件 我參照了xlsx的cpexcel.js這個文件的 同一地方是 var cpt = cptable; 所以后面改成這個以后引入就沒問題了 具體咋回事也不清楚。

如果引入沒問題的這段可以跳過。。

• 解決
  1.在index.html中引入它的源文件 路徑 node_modules\xlsx-style\dist\xlsx.full.min.js
  2.需要把該文件放在static靜態文件目錄下才可以引入。

<script src="./static/xlsx.full.min.js"></script>

3.全局中有XLSX變量就引入成功了

• 使用方法 調用downloadExl（）傳入數據
• 主要功能代碼 在vue中可自行修改

樣式修改 參考文檔

    // 下載功能
        function saveAs(obj, fileName) {
             var tmpa = document.createElement("a");
              tmpa.download = fileName || "未命名";
              // 兼容ie 
              if ("msSaveOrOpenBlob" in navigator) {
                window.navigator.msSaveOrOpenBlob(obj, "下載的文件名"+ ".xlsx");
              } else {
                tmpa.href = URL.createObjectURL(obj);
              }
              tmpa.click();
              setTimeout(function() {
                URL.revokeObjectURL(obj);
              }, 100);
        }
      // 模擬數據
        var data = [{"功能模塊與路徑":"\\APP接口測試示例\\登錄接口","用例編號":"s_001","前置條件":"第一個為前置條件，最后一個為預期結果，需要帶相應關鍵字","用例名稱":"用例編寫示例，用例必須有葉子結節","操作步驟":"操作步驟直接填寫，每個步驟一行","預期結果":"用例必須有葉子結點","標記":"","優先級":"3","用例屬性":"","編制人員":"","用例設計時間":"2019-02-15","備注":""},{"功能模塊與路徑":"","用例編號":"","前置條件":"","用例名稱":"","操作步驟":"操作步驟需要按順序排序","預期結果":"","標記":"","優先級":"","用例屬性":"","編制人員":"","用例設計時間":"","備注":""},{"功能模塊與路徑":"\\APP接口測試示例\\登錄接口\\身份證類型登錄","用例編號":"s_002","前置條件":"我是前置條件，需要“前置條件”為關鍵字","用例名稱":"身份證登錄","操作步驟":"1，操作步驟1，按次序排列","預期結果":"我是預期結果","標記":"","優先級":"3","用例屬性":"","編制人員":"","用例設計時間":"2019-02-15","備注":""},{"功能模塊與路徑":"","用例編號":"","前置條件":"","用例名稱":"","操作步驟":"2，操作步驟2","預期結果":"","標記":"","優先級":"","用例屬性":"","編制人員":"","用例設計時間":"","備注":""},{"功能模塊與路徑":"","用例編號":"","前置條件":"","用例名稱":"","操作步驟":"3，我是操作步驟3，按次序排列","預期結果":"","標記":"","優先級":"","用例屬性":"","編制人員":"","用例設計時間":"","備注":""},{"功能模塊與路徑":"\\APP接口測試示例\\登錄接口\\身份證類型登錄","用例編號":"s_003","用例名稱":"用例名稱一定要長-登錄失敗","操作步驟":"我是操作步驟","預期結果":"如果這個是預期結果，則上層為用例","標記":"","優先級":"3","用例屬性":"","編制人員":"","用例設計時間":"2019-02-15","備注":""},{"功能模塊與路徑":"\\APP接口測試示例\\登錄接口","用例編號":"s_004","用例名稱":"賬戶類型登錄","預期結果":"賬戶為空3","標記":"","優先級":"3","用例屬性":"","編制人員":"","用例設計時間":"2019-02-15","備注":""}]
      // 配置文件類型
        const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
        function downloadExl(json, type) {
            var tmpdata = json[0];
            json.unshift({});
            var keyMap = []; //獲取keys
            for (var k in tmpdata) {
                keyMap.push(k);
                json[0][k] = k;
            }
            var tmpdata = [];//用來保存轉換好的json 
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
                v: v[k],
                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
                v: v.v
            });
            var outputPos = Object.keys(tmpdata); //設置區域,比如表格從A1到D10
            tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====設置xlsx單元格樣式
            tmpdata["!merges"] = [{
                s: { c: 1, r: 0 },
                e: { c: 4, r: 0 }
            }];//<====合並單元格 
            var tmpWB = {
                SheetNames: ['mySheet'], //保存的表標題
                Sheets: {
                    'mySheet': Object.assign({},
                        tmpdata, //內容
                        {
                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設置填充區域
                        })
                }
            };
            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
                { bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//這里的數據是用來定義導出的格式類型
            ))], {
                    type: ""
                });
            saveAs(tmpDown, "下載的文件名" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
        }
      // 獲取26個英文字母用來表示excel的列
        function getCharCol(n) {
            let temCol = '',
                s = '',
                m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
        }
        function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
                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;
            } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
        }

• 最后貼個效果圖

  
  
   

  

  effect.PNG

總結

其實以上都是參考網上查閱的一些資料 如有什么問題還望海涵 只是寫下來就當做學習筆記了。。