设置导出的表格样式,xlsx-js-style!真的绝绝子!
1.下载xlsx-js-style依赖
npm install xlsx-js-style
2.在main.js中挂载到vue原型上,方便使用
import XLSX from 'xlsx-js-style'
Vue.prototype.$xlsx = XLSX
3.页面具体写法文章来源:https://www.toymoban.com/news/detail-798578.html
exportExcel() {
const th = [
[
"序号",
"工号",
"姓名",
"备注",
],
];
let newData = [];
this.listData.map((item, index) => {
newData.push([
index + 1,
item.jobNumber,
item.name,
item.remark
]);
});
let excelData = th.concat(newData); //数组的拼接
let workbook = this.$xlsx.utils.book_new(); // 工作簿
let worksheet = this.$xlsx.utils.aoa_to_sheet(excelData); // 数据表
//以下是样式设置,样式设置放在组织完数据之后,xlsx-js-style的核心API就是SheetJS的
//样式的设置可以参考相关文档 贴在文章末尾第二个链接
//修改列宽cols 行宽就用rows 总共11列
worksheet["!cols"] = [
{
width: 14,
},
{
width: 14,
},
{
width: 14,
},
{
width: 20,
}
];
// 修改行高 这里我只修改了第一行
worksheet["!rows"] = new Array(this.listData.length + 1).fill({
hpx: 24,
});
//合并第一行单元格 s和e指范围即第一行 第一列到第十一列
// worksheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }];
Object.keys(worksheet).forEach((key) => {
// 非!开头的属性都是单元格
// excelData.length是我表格的长度也就是总行数
//设置从第二行开始的数据样式
for (let i = 1; i <= excelData.length; i++) {
//用正则表达式判断是否是某一行
if (key.replace(/[^0-9]/gi, "") == i) {
worksheet[key].s = {
//设置字体
font: {
name: "Arial",
sz: 12,
bold: false,
color: { rgb: "000000" },
},
//设置居中
alignment: {
horizontal: "center",
vertical: "center",
wrapText: true,
},
//设置边框
border: {
top: { style: "thin" },
right: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
},
};
}
}
});
this.$xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");
this.$xlsx.writeFile(workbook, "a.xlsx"); //表格名称
},
参考:前端根据后端返回数据导出指定样式的表格(xlsx-js-style)_前端excel导出指定格式-CSDN博客文章来源地址https://www.toymoban.com/news/detail-798578.html
到了这里,关于纯前端导出,设置导出xlsx文件样式xlsx-js-style的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!