感谢@robin给出的思路和建议。
注意xlsx-style0.8.13报错需处理
在\node_modules\xlsx-style\dist\cpexcel.js
var cpt = require('./cpt' + 'able'); 改为 var cpt = cptable;
配置页面:
....
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插件。