如果你只是想在web頁面或vue的頁面生成帶樣式的excel的表格，看這一篇就夠了。在接到公司這個需求之后，查閱了大量的資料，最后還是寫出來了。實現原理沒有其他人寫的那么麻煩，只需要引入兩個包，這個需求就可實現。閑話少說，直接上代碼！
1、第一步下載兩個npm包依賴
npm i xlsx -S
npm i xlsx-style -S
這兩個包第一個是導出excel用的，第二個是修改生成excel樣式用的。
web頁面直接引入兩個文件中的 xlsx.full.min.js 文件就可以，如下
image
2、第二步開始綁定事件
image
通過點擊事件傳遞實參給底下生產excel的方法，materialDetailArr是我接收mapGetters取到的后臺的表格的數據，
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指向
// 遍歷數據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] ,這樣的話注釋掉上面的循環代碼就可以
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); //設置區域,比如表格從A1到D10
var tmpWB = {
SheetNames: ["mySheet"], //保存的表標題
Sheets: {
mySheet: Object.assign(
{},
tmpdata, //內容
{
"!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //設置填充區域
"!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"
} //這里的數據是用來定義導出的格式類型
)
)
],
{
type: ""
}
);
that.saveAs(
tmpDown,
"數據表格" +
"." +
(wopts.bookType == "biff2" ? "xls" : wopts.bookType)
);
} else {
alert("數據為空");
}
},
// 獲取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的表格
image
表格頭部導出（重要） 參考http://www.lxweimin.com/p/178285d597ff
