<el-table
ref="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 插件。