vue exceljs 实现导出excel并设置网格线、背景色、 垂直居中、分页打印

一、 下载 exceljs

pnpm install exceljs

二、 页面中使用

    // 导出 exportExcelexportToExcel() {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: "导出失败",});});},