可能很多前端同学在做导出的时候都是掉一个接口,然后获取到流,然后创建blob下载,但是有些数据量小的,完全可以前端来做,或者后端不愿意做的时候,这时候前端同学就要来做这件事情。今天就分享一个刚使用过的包来导出vue2和3通用
第一步 安装
npm install exceljs file-saver
第二步 导入
在要导出的vue文件内
const ExcelJS = require("exceljs");
import { saveAs } from "file-saver";
第三步 使用
const exportToExcel = () => {
// 创建工作簿
const _workbook = new ExcelJS.Workbook();
// 添加工作表
const _sheet1 = _workbook.addWorksheet("sheet1",{
//设置为A4纸
pageSetup:{paperSize: 9, orientation:'landscape'}
});
//设置页边距
_sheet1.pageSetup.margins = {
left: 0.7, right: 0.7,
top: 0.75, bottom: 0.75,
header: 0.3, footer: 0.3
};
_sheet1.pageSetup.margins = {
horizontalCentered:true
};
//涉资表头数据
_sheet1.columns = state.dialogColumns.map((item)=>{
return {
header:item.label,
key:item.props,
width:item.wch
}
})
// 设置表格数据
_sheet1.addRows(state.dialogTableData);
//在表头上面再追加的两行
_sheet1.spliceRows(1,0,[`日期:${dayjs(state.dialogDate).format('YYYY-MM-DD')}`,'','','','','','车辆调度员:','','','',''])
_sheet1.spliceRows(1,0,['车辆运行记录'])
//合并单元格
_sheet1.mergeCells("A1:K1");
_sheet1.mergeCells("A2:F2");
_sheet1.mergeCells("G2:K2");
//设置边框和行高
_sheet1._rows.forEach((item,index)=>{
item.border = {
top: {
style: 'thin'
},
left: {
style: 'thin'
},
bottom: {
style: 'thin'
},
right: {
style: 'thin'
},
};
//其他行
_sheet1.getRow(index+1).height = 30
})
// 设置字体大小
_sheet1.getRow(1).font = {
size: 14,
};
// 导出表格
_workbook.xlsx.writeBuffer().then((buffer) => {
let _file = new Blob([buffer], {
type: "application/octet-stream",
});
saveAs(_file, "车辆运行计划.xlsx");
});
}
特殊样式设置可以查看官网,使用就这么简单,欢迎交流~~