Vue XLSX使用及部分自定義樣式

安裝

npm install --save xlsx file-saver 

引入

import XLSX from 'xlsx' 

導入

importExcel (file) {
      var f = file;       let _this = this;       var rABS = false;//是否將文件讀取為二進制字符串       var reader = new FileReader();       FileReader.prototype.readAsBinaryString = function (file) {         var binary = "";         var rABS = false; //是否將文件讀取為二進制字符串         var pt = this;         var wb; //讀取完成的數據         var outdata;         var reader = new FileReader();         reader.onload = function (e) {           var bytes = new Uint8Array(reader.result);           var length = bytes.byteLength;           for (var i = 0; i < length; i++) {             binary += String.fromCharCode(bytes[i]);           }           if (rABS) {             wb = XLSX.read(btoa(fixdata(binary)), { //手動轉化               type: 'base64'             });           } else {             wb = XLSX.read(binary, {               type: 'binary'             });           }           console.log(wb.Sheets[wb.SheetNames[0]])//得到一個表格對象 //表格對象 // { !merge: ... , !refs: ..., A1:..., A2:... } // 可以根據表格對象的數據解析成自己想要的數據 // 也可以調用sheet_to_json等XLSX的方法轉化數據         }         reader.readAsArrayBuffer(f);       }       if (rABS) {         reader.readAsArrayBuffer(f);       } else {         reader.readAsBinaryString(f);       }     } 

導出

//組合sheet對象 sheet = {} sheet['!ref'] = "A1:E7";//左上角到右下角的范圍 // 合並的單元格，s表示開始，e表示結束，c是列的索引，r是行的索引 sheet['!merges'] = [{ s: { c: 0, r: 0 }, e: { c: 4, r: 0 } }] // 根據需要設置sheet的每一行，每一列 sheet['A1"] = { t:"s", v: "1000" }//第一行，第一列 sheet['B1"] = { t:"n", v: 1000 }//第一行，第二列 sheet['A2"] = { t:"s", v: "1000" }//第二行，第一列 t表示類型，s是字符串，n是數字 //最后得到sheet，如果需要可以下載，將該sheet轉成blob文件，再下載blob文件 // sheet轉blob sheet2blob (sheet) {       var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true };       var workBook = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };       workBook.Sheets['Sheet1'] = sheet;       var sheetData = XLSXStyle.write(workBook, wopts);       var sheetDataResult = null;       if (typeof ArrayBuffer !== 'undefined') {         var buf =  new ArrayBuffer(sheetData.length);         var view = new Uint8Array(buf);         for (var i = 0; i != sheetData.length; ++i)            view[i] = sheetData.charCodeAt(i) & 0xFF;         sheetDataResult = buf;       } else {         var buf = new Array(sheetData.length);         for (var i = 0; i != sheetData.length; ++i) buf[i] = sheetData.charCodeAt(i) & 0xFF;         sheetDataResult = buf;       }       return new Blob([sheetDataResult]);     } //下載sheet saveAs (obj, fileName) {       //當然可以自定義簡單的下載文件實現方式       var tmpa = document.createElement("a");       tmpa.download = fileName ? fileName + '.xlsx' : '解析異常賬號' + new Date().getTime() + '.xlsx';       tmpa.href = URL.createObjectURL(obj); //綁定a標簽       tmpa.click(); //模擬點擊實現下載          setTimeout(function () { //延時釋放         URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL       }, 100);     } 

導出樣式的設置

xlsx基礎版本不能設置樣式，需要下載pro版，或者使用xlsx-style替代npm install --save xlsx
import XLSXStyle from 'xlsx-style'

（1）設置字體，對齊，背景色

var style = {         // 表頭樣式         hs: {            font: { sz: 10, color: { rgb: "ff0000" }, bold: true },           alignment: { horizontal: "center", vertical: "center", wrapText: true },           fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" }},         },         // 內容樣式         bs: {           font: { sz: 11 },           alignment: { horizontal: "center", vertical: "center", wrapText: true },         },         // 注釋行樣式         ts: {           font: { sz: 10, bold: true },           alignment: { vertical: "center", wrapText: true },           fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "00B050" }}         }       }; sheet['A1'].s = style.hs; 

(2) 設置單元格寬度

sheet['!cols'] = [ {wpx: 500}, { wpx:500} ] //將第一列，第二列的寬度設為500px //如果需要根據內容來設置寬度，則在填寫內容的時候動態改變!cols屬性的第幾個元素的值，數組索引表示列的索引 /**      * 根據文字長度獲取表格單元寬度      * @param str 文字      * @param currLen 當前寬度      */     getTdWidth (str, currLenObj) {       let currLen = currLenObj ? currLenObj.wpx : null;       if (this.isNull(str)) return;       if (str instanceof Array) {         str = 'str' + str.join('；');       } else {         if (typeof str != 'string') {           str = '' + str;         }       }       let len = str.match(/[^\x00-\xff]/ig) != null ? (str.length + 1) * 15 : (str.length + 1) * 7.5;       if (this.isNull(currLen)) return len;       if (len < currLen)          return currLen;       else return len;     } 

設置單元格高度

!rows，xlsx-style沒有提供這個功能，但是xlsx有這個功能，所以解決這個問題方法有
（1）使用xlsx pro版本
（2）修改xlsx源碼，給xlsx加上style功能
（3）修改xlsx-style源碼，給xlsx加上 !rows功能
基於復雜程度和貧窮程度，選擇（3）

步驟：

1. 使用靜態文件替代import
   （1）將node_modules里的xlsx-style的文件夾下的
   xlsx.core.min.js拿出來放在靜態文件放置的文件夾下
   （2）index.html中引入

    <script src="<%= BASE_URL %>cdn/xlsx-style/xlsx.core.min.js" charset="utf-8"></script> 

（3）刪除import xlsxstyle代碼

2.修改xlsx.core.min.js

位置：
write_ws_xml_data

//chart2height function char2height(chr) { return ((chr * MDW + 5) / MDW * 256 | 0) / 256 } 

原理是在拼接xml row標簽的時候給row標簽加上ht, customHeight屬性