纯前端导出,设置导出xlsx文件样式xlsx-js-style
时间:2024-04-20 18:45:19 来源:网络cs 作者:晨起 栏目:其他工具 阅读:
设置导出的表格样式,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.页面具体写法
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.kjpai.cn/news/2024-04-20/160772.html,文章来源:网络cs,作者:晨起,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。