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

最新推荐文章于 2024-07-25 07:30:00 发布

是小张呀！

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量2.3k

点赞数

文章标签： vue.js excel 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/132202932

版权

一、下载 exceljs

pnpm install exceljs

二、页面中使用

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