如果你只是想在web頁面或vue的頁面生成帶樣式的excel的表格贩猎，看這一篇就夠了熊户。在接到公司這個需求之后，查閱了大量的資料融欧，最后還是寫出來了敏弃。實現(xiàn)原理沒有其他人寫的那么麻煩，只需要引入兩個包噪馏，這個需求就可實現(xiàn)。閑話少說绿饵，直接上代碼欠肾！
1、第一步下載兩個npm包依賴
npm i xlsx -S
npm i xlsx-style -S
這兩個包第一個是導出excel用的拟赊，第二個是修改生成excel樣式用的刺桃。
web頁面直接引入兩個文件中的 xlsx.full.min.js 文件就可以，如下
2吸祟、第二步開始綁定事件
通過點擊事件傳遞實參給底下生產(chǎn)excel的方法瑟慈，materialDetailArr是我接收mapGetters取到的后臺的表格的數(shù)據(jù)，
a標簽沒有樣式屋匕，起到鏈接下載的作用葛碧。
首先聲明兩個全局變量 tmpDown、wopts
let tmpDown;
const wopts = { bookType: "xlsx", bookSST: true,type: "binary",? cellStyles: true};
//接下來幾個方法 vue直接在methods對象里寫
saveAs方法是a標簽鏈接的方法
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);
? ? },
```
//生成表格的方法
```
downloadExl(json, type) {
? ? ? let that = this;//控制this指向
? ?// 遍歷數(shù)據(jù)key值过吻，獲得表格表頭
? ? ? //? ?var tmpdata = json[0];
? ? ? // json.unshift({});
? ? ?//? var keyMap = []; //獲取keys
? ? ? //? ?for (var k in tmpdata) {
? ? ? ?//? ?keyMap.push(k);
? ? ? ? //? ?console.log(keyMap)
? ? ? ? //? json[0][k] = k;
? ? ? //? ?}
```
//或者key值直接把所有key值賦給keyMap
//比如這樣 let? keyMap=[aaa,bbb,ccc] ,這樣的話注釋掉上面的循環(huán)代碼就可以
```
? ? ? ? var tmpdata = []; //用來保存轉換好的json
? ? ? ? json
? ? ? ? ? .map((v, i) =>
? ? ? ? ? ? keyMap.map((k, j) =>
? ? ? ? ? ? ? Object.assign(
? ? ? ? ? ? ? ? {},
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? v: v[k],
? ? ? ? ? ? ? ? ? position:
? ? ? ? ? ? ? ? ? ? (j > 25
? ? ? ? ? ? ? ? ? ? ? ? that.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); //設置區(qū)域,比如表格從A1到D10
? ? ? ? var tmpWB = {
? ? ? ? ? SheetNames: ["mySheet"], //保存的表標題
? ? ? ? ? Sheets: {
? ? ? ? ? ? mySheet: Object.assign(
? ? ? ? ? ? ? {},
? ? ? ? ? ? ? tmpdata, //內(nèi)容
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? "!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //設置填充區(qū)域
? ? ? ? ? ? ? ? "!cols": [
? ? ? ? ? ? ? ? ? { wpx: 325 }, //生成表格每一列寬度进泼，這里只寫兩個wpx例子
? ? ? ? ? ? ? ? ? { wpx: 135 }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? A1: {//給每列的第一行，也就是表頭設置名稱 樣式纤虽。A1到 N1
? ? ? ? ? ? ? ? ? v: "磅房名稱",//生成表格表頭另命名乳绕，可以覆蓋上邊的keyMap 二者不沖突
? ? ? ? ? ? ? ? ? t: "s",
? ? ? ? ? ? ? ? ? s: {
? ? ? ? ? ? ? ? ? ? font: {
? ? ? ? ? ? ? ? ? ? ? sz: 13, //字體
? ? ? ? ? ? ? ? ? ? ? bold: true//加粗
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? fill: {
? ? ? ? ? ? ? ? ? ? ? fgColor: {
? ? ? ? ? ? ? ? ? ? ? ? rgb: "58b7ff" //背景顏色
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? alignment: {
? ? ? ? ? ? ? ? ? ? ? horizontal: "center"http://居中
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? B1: {
? ? ? ? ? ? ? ? ? v: "材料名稱",
? ? ? ? ? ? ? ? ? t: "s",
? ? ? ? ? ? ? ? ? s: {
? ? ? ? ? ? ? ? ? ? font: {
? ? ? ? ? ? ? ? ? ? ? sz: 13,
? ? ? ? ? ? ? ? ? ? ? bold: true
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? fill: {
? ? ? ? ? ? ? ? ? ? ? fgColor: {
? ? ? ? ? ? ? ? ? ? ? ? rgb: "58b7ff" //背景顏色
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? alignment: {
? ? ? ? ? ? ? ? ? ? ? horizontal: "center"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? ? }
? ? ? ? };
? ? ? ? tmpDown = new Blob(
? ? ? ? ? [
? ? ? ? ? ? that.s2ab(
? ? ? ? ? ? ? XLSX.write(
? ? ? ? ? ? ? ? tmpWB,
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? bookType: type == undefined ? "xlsx" : type,
? ? ? ? ? ? ? ? ? bookSST: false,
? ? ? ? ? ? ? ? ? type: "binary"
? ? ? ? ? ? ? ? } //這里的數(shù)據(jù)是用來定義導出的格式類型
? ? ? ? ? ? ? )
? ? ? ? ? ? )
? ? ? ? ? ],
? ? ? ? ? {
? ? ? ? ? ? type: ""
? ? ? ? ? }
? ? ? ? );
? ? ? ? that.saveAs(
? ? ? ? ? tmpDown,
? ? ? ? ? "數(shù)據(jù)表格" +
? ? ? ? ? ? "." +
? ? ? ? ? ? (wopts.bookType == "biff2" ? "xls" : wopts.bookType)
? ? ? ? );
? ? ? } else {
? ? ? ? alert("數(shù)據(jù)為空");
? ? ? }
? ? },
```
```
// 獲取26個英文字母用來表示excel的列
? ? 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;
? ? },
? ? 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;
? ? ? }
? ? },
```
以上四個方法，能夠成功導出excel的表格
