如果你只是想在web页面或vue的页面生成带样式的excel的表格，看这一篇就够了。在接到公司这个需求之后，查阅了大量的资料，最后还是写出来了。实现原理没有其他人写的那么麻烦，只需要引入两个包，这个需求就可实现。闲话少说，直接上代码！
1、第一步下载两个npm包依赖
npm i xlsx -S
npm i xlsx-style -S
这两个包第一个是导出excel用的，第二个是修改生成excel样式用的。
web页面直接引入两个文件中的 xlsx.full.min.js 文件就可以，如下
2、第二步开始绑定事件
通过点击事件传递实参给底下生产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"//居中
}
}
},
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的表格
