前端数据导出

背景

在实际场景中，大多数情况下，数据量都是比较大且数据需要经过业务处理后导出的，在前端进行导出不适合；但是，如果数据量较小且业务简单时，可以采用前端导出的方式。

依赖

yarn add ant-design-vue
yarn add exceljs
yarn add file-saver

代码展示

<template>
  <div>
    <h3>excel下载表格</h3>
    <Button @click="excelExport">excelDown下载</Button>
  </div>
</template>
<script setup>
import { Button } from "ant-design-vue";
// 引入exceljs模块
import ExcelJS from "exceljs";

// 定义下载表格文件方法
const downloadFile = (buffer, fileName) => {
  console.log("downkloadFile导出");
  let fileUrl = window.URL.createObjectURL(new Blob([buffer]));
  let fileLink = document.createElement("a");
  fileLink.href = fileUrl;
  fileLink.setAttribute("download", fileName);
  document.body.appendChild(fileLink);
  fileLink.click();
};

// 定义导出方法
const excelExport = async () => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet("sheet1");
  // 模拟数据列表
  const data = [
    {
      id: "1",
      name: "Jack",
      age: 18,
      gender: "male",
      achievement: 70,
    },
    {
      id: "2",
      name: "Lily",
      age: 16,
      gender: "female",
      achievement: 90,
    },
  ];
  /**
   * 设置列
   * header: 列名
   * key: 列字段
   * width: 列宽度
   * */
  worksheet.columns = [
    {
      header: "编号",
      key: "id",
      width: 12,
    },
    {
      header: "姓名",
      key: "name",
      width: 16,
    },
    {
      header: "年龄",
      key: "age",
      width: 12,
    },
    {
      header: "性别",
      key: "gender",
      width: 12,
    },
    {
      header: "成绩",
      key: "achievement",
      width: 12,
    },
  ];
  // 插入多条数据
  data.forEach((item) => {
    worksheet.addRow(item);
  });

  // 设置整个表格数据样式
  worksheet.eachRow((row, rowNum) => {
    const size = rowNum % 2 == 1 ? 20 : 14;
    const bold = rowNum % 2 == 1 ? true : false;
    // 设置列头样式
    row.eachCell((cell) => {
      cell.font = {
        size,
        bold,
      };
      cell.alignment = {
        horizontal: "center",
        vertical: "middle",
      };
    });
    // 设置表格整体行高
    row.height = 40;
  });

  // 将表格名称“成绩单”插入表格第一行
  const rowIndex = 1; // 插入行的索引
  const newRow = worksheet.insertRow(rowIndex);
  // 设置插入行的名称
  newRow.getCell(1).value = "成绩单";

  /**
   * 自定义表格样式font
   * size: 字体大小
   * color: 颜色(rgb)
   * bold: 加粗
   * */
  // alignment 设置单元格的水平和垂直居中
  const A1 = worksheet.getCell("A1");
  A1.font = {
    size: 20,
    color: { rgb: "FFFFAA00" },
    bold: true,
  };
  A1.alignment = {
    horizontal: "center",
    vertical: "middle",
  };

  // 个性化设置，要放在批量设置之后
  // 设置第2行的行高
  worksheet.getRow(2).height = 30;
  // 合并单元格
  worksheet.mergeCells("A1:E1");

  // 合并后居中设置
  worksheet.getCell("A1").alignment = {
    horizontal: "center",
    vertical: "middle",
  };

  // 将表格数据文件
  const buffer = await workbook.xlsx.writeBuffer();
  // 下载表格文件
  downloadFile(buffer, "成绩单.xlsx");
};
</script>
<style scoped lang="scss"></style>

导出文件内容展示