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屬性