安装插件
npm install file-saver xlsx -s
项目中导入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
使用方法
HTML
<el-table id="educe-table-day" @selection-change="handleSelectionChange" stripe ref="multipleDayTable"> </el-table>
- js
handleExport(activeName) {
// 判断是否有可导出数据
if (!this.list.length) {
this.$message.error('当前表格暂无可导出的数据');
return;
}
// 活动名称映射
const activityMap = {
day: { showUnit: '日', timeUnit: '时', dateFormat: 'YYYY年-MM月-DD日', value: this.dayValue },
month: { showUnit: '月', timeUnit: '日', dateFormat: 'YYYY年-MM月', value: this.monthValue },
year: { showUnit: '年', timeUnit: '月', dateFormat: 'YYYY年', value: this.yearValue }
};
const activity = activityMap[activeName];
if (!activity) {
this.$message.error('未知参数');
return;
}
// 日期格式化
const currDate = dayjs(activity.value).format(activity.dateFormat);
// 获取表格元素
const elementTable = `educe-table-${activeName}`;
const table = document.querySelector(`#${elementTable}`);
if (!table) {
this.$message.error('找不到要导出的表格');
return;
}
// 克隆表格并移除固定列
const clonedTable = table.cloneNode(true);
clonedTable.removeChild(clonedTable.querySelector(".el-table__fixed"));
clonedTable.removeChild(clonedTable.querySelector('.el-table__fixed-right'));
// 生成 Excel 工作簿对象
const wb = XLSX.utils.table_to_book(clonedTable);
// 导出文件名
const filename = `${currDate + this.startTime + activity.timeUnit + '-' + this.endTime + activity.timeUnit + '用能' + activity.showUnit + '表'}.xlsx`;
// 导出 Excel 文件
try {
const wbout = XLSX.write(wb, {
bookType: 'xlsx',
book: true,
type: 'array',
});
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);
return wbout;
} catch (e) {
console.error(e);
this.$message.error('导出失败');
}
}```
2 条评论
看的我热血沸腾啊www.jiwenlaw.com
不错不错,我喜欢看 https://www.237fa.com/