前端实现下载Excel表

研究了好几天,终于实现前端Excel下载,废话不多说,直接上代码

前端使用的 ExcelJS 插件 实现的效果有 给单元格添加了边框效果及符合条件的某条数据添加了单元格颜色效果  当前项目用到的是  "exceljs": "^4.3.0",

单独封装方法  导出

import ExcelJS from 'exceljs';
export const download = (tableHead, tableData, nodeName) => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  let data = [
    ['序号', ...tableHead.map(item => item.label1)]
  ]
  tableData.forEach((element, index) => {
    data.push([
      index + 1,
      element.time.value ? element.time.value : '--',
      element.w21003.value ? element.w21003.value : '--',
      element.w21011.value ? element.w21011.value : '--',
      element.w01001.value ? element.w01001.value : '--',
      element.w01010.value ? element.w01010.value : '--',
      element.w01009.value ? element.w01009.value : '--',
      element.w01014.value ? element.w01014.value : '--',
      element.w01003.value ? element.w01003.value : '--',
      element.e01002.value ? element.e01002.value : '--',
      element.w010101.value ? element.w010101.value : '--'
    ])
  })
  // 假设data为要导出的数据数组
  data.forEach(item => {
    worksheet.addRow(item);
  });
  const colors = ['FFFFFF', 'd68787', 'e5a23c', '7ec514', 'ae00ee']

  tableData.forEach((el, rowIndex) => {
    const {
      time,
      w21003,
      w21011,
      w01001,
      w01010,
      w01009,
      w01014,
      w01003,
      e01002,
      w010101
    } = el
    worksheet.getRow(rowIndex + 2).getCell(2).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[time.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(3).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w21003.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(4).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w21011.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(5).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w01001.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(6).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w01010.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(7).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w01009.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(8).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w01014.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(9).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w01003.colorStatus - 1] },
    };

    worksheet.getRow(rowIndex + 2).getCell(10).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[e01002.colorStatus - 1] },
    };


    worksheet.getRow(rowIndex + 2).getCell(11).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF' + colors[w010101.colorStatus - 1] },
    };
  })
  worksheet.columns.forEach((column) => {
    column.width = 16.5;
  });
  // 添加边框
  for (let num = 0; num < worksheet.lastRow._number; num++) { // 循环出每一行
    for (let index = 0; index < worksheet.columns.length; index++) { // 循环出每一个单元格
      worksheet.getRow(num + 1).getCell(index + 1).border = { // 为单元格添加边框
        top: { style: 'thin' },
        left: { style: 'thin' },
        bottom: { style: 'thin' },
        right: { style: 'thin' }
      }
    }
  }
  workbook.xlsx.writeBuffer().then((buffer) => {
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = nodeName + ' 数据审核.xlsx'; // 下载文件名
    link.click();
  });
}

导入

import { download } from '../../utils/down'

可根据自己的情况传参, 表头,表内容,下载的标题

handleDown() {
    setTimeout(() => {
       download(this.tableHeadItem, this.tableData,this.nodeName)
       this.isHideTitle = '详细情况'
    },2000)
}
    

大功告成