关于xlsx:vue2xlsxxlsxstyleFileSaver实现复杂表格的下载

<el-tableref="report-table">....</el-table>import FileSaver from 'file-saver';import XLSXS from "xlsx-style";import * as XLSX from 'xlsx';export default { data() { return { // 表格 table: { loading: false, loadingText: '', data: [], total: 0, } }; }, created() { this.init(); }, methods: { /** 导出按钮操作 */ handleExport(excelName) { this.table.loading = true; this.table.loadingText = '导出中,请稍后....'; setTimeout(() => { try { const $e = this.$refs['report-table'].$el; let $table = $e.querySelector('.el-table__fixed'); if(!$table) { $table = $e; } let wb = XLSX.utils.table_to_book($table, {raw:true}); this.xlsxStyle(wb); var ws = XLSXS.write(wb, { type: "buffer", }); // const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'}); FileSaver.saveAs( new Blob([ws],{type: 'application/octet-stream'}), `${excelName}.xlsx`, ) } catch (e) { if (typeof console !== 'undefined') console.error(e); } this.table.loading = false; this.table.loadingText = ''; }, 1000); }, xlsxStyle(wb) { let ws = wb.Sheets["Sheet1"]; for (let key in ws) { // console.log(key, ws[key]) const num = key.slice(1, key.length); // 表头 if (num === '1' && ws[key].t !== 'z') { // 留神:border未开启,如果开启,在跨行、跨列的状况下会呈现少边框的问题。 ws[key].s = { font: { //字体相干款式 name: '宋体', //字体类型 sz: 11, //字体大小 color: { rgb: '' }, //字体色彩 bold: true, //是否加粗 }, // border: { // top: { // style: "thin", // color: { // auto: 1, // }, // }, // left: { // style: "thin", // color: { // auto: 1, // }, // }, // right: { // style: "thin", // color: { // auto: 1, // }, // }, // bottom: { // style: "thin", // color: { // auto: 1, // }, // }, // }, alignment: { /// 主动换行 wrapText: 1, // 居中 horizontal: "center", vertical: "center", indent: 0 } } } else { // 所有表格 if (key !== '!rows' && key !== '!cols' && key !== '!ref' && key !== '!fullref' && ws[key].t !== 'z') { ws[key].s = { font: { //字体相干款式 name: "宋体", //字体类型 sz: 11, //字体大小 color: { rgb: "" }, //字体色彩 }, // border: { // top: { // style: "thin", // color: { // auto: 1, // }, // }, // left: { // style: "thin", // color: { // auto: 1, // }, // }, // right: { // style: "thin", // color: { // auto: 1, // }, // }, // bottom: { // style: "thin", // color: { // auto: 1, // }, // }, // }, alignment: { /// 主动换行 wrapText: 1, // 居中 horizontal: "center", vertical: "center", indent: 0, }, }; } } } }, },};目前满足简单表格的需要,只有el-table能画进去的表格,导出格局都没问题。惟一的问题是,导出的表格,单元格字体款式批改未胜利。单元格款式可能批改,应用xlsx-style插件。 ...

March 7, 2023 · 2 min · jiezi