1. Download exceljs
pnpm install exceljs
2. Use in the page
// 导出 exportExcel
exportToExcel() {
this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
const loading = this.$loading({
lock: true,
text: "导出中...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet("销售人数明细表");
// 设置网格线颜色和间距
sheet.properties.gridLines = {
color: {
argb: "FFC0C0C0" }, // 设置网格线颜色为灰色
style: "thin", // 设置网格线样式为细线
};
// 添加表头
const headerRow = sheet.addRow([
"项目",
"签约日期",
"签约销售",
"客户姓名",
"客户编号",
]);
// 获取表头行对象并设置样式 文字居中，加粗
headerRow.eachCell((cell) => {
cell.alignment = {
vertical: "middle", horizontal: "center" };
cell.font = {
bold: true };
cell.fill = {
type: "pattern",
pattern: "solid",
fgColor: {
argb: "FF808080" },
};
// 设置表头单元格边框
cell.border = {
top: {
style: "thin", color: {
argb: "FF000000" } },
left: {
style: "thin", color: {
argb: "FF000000" } },
bottom: {
style: "thin", color: {
argb: "FF000000" } },
right: {
style: "thin", color: {
argb: "FF000000" } },
};
});
const headerRowHeight = 30; // 设置表头行的高度
headerRow.height = headerRowHeight;
const allData = []; // 用于存储来自不同分页的所有数据的数组
const response = await getcheckinlist({
...this.formInline,
page: 1,
limit: 99999,
});
const {
data } = response;
allData.push(...data.rows);
// 添加表格数据
allData.forEach((item) => {
const row = sheet.addRow([
item.projectname,
item.changedate,
item.customername,
item.username,
item.customerno,
]);
// 设置数据行样式 文字居中
row.eachCell((cell) => {
// 设置数据行样式 文字居中，设置行高
row.eachCell((cell) => {
cell.alignment = {
vertical: "middle", horizontal: "center" };
cell.fill = {
type: "pattern",
pattern: "solid",
fgColor: {
argb: "f6f6f6f6" }, // 设置颜色
};
cell.border = {
top: {
style: "thin", color: {
argb: "FF000000" } },
left: {
style: "thin", color: {
argb: "FF000000" } },
bottom: {
style: "thin", color: {
argb: "FF000000" } },
right: {
style: "thin", color: {
argb: "FF000000" } },
};
});
const dataRowHeight = 30; // 设置数据行的高度
row.height = dataRowHeight;
});
});
// 设置列宽
sheet.columns.forEach((column) => {
column.width = 15;
});
// 生成文件
const buffer = await workbook.xlsx.writeBuffer();
const excelData = new Blob([buffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
loading.close();
// 下载文件
saveAs(excelData, "人数明细表.xlsx");
})
.catch(() => {
this.$message({
type: "info",
message: "导出失败",
});
});
},