纯前端 Excel 表格导出

使用的库 exceljs

库： GitHub - exceljs/exceljs: Excel Workbook Manager

参考资料：https://juejin.cn/post/7152817023343394823

使用方式

导入

import * as Excel from 'exceljs';

创建工作簿和工作表

const workbook = new Excel.Workbook()
workbook.created = new Date()
workbook.modified = new Date()
const worksheet = workbook.addWorksheet('sheet1')

添加表头

const headers = Object.keys(dataArray[0]);
worksheet.addRow(headers);

在工作表中写入列表数据

dataArray.forEach(data => {
  const rowValues = headers.map(header => data[header]);
  worksheet.addRow(rowValues);
});

在工作表中插入图片

base64

const imageId = workbook.addImage({
  base64: imageBase64,
  extension: 'png',
});
worksheet.addImage(imageId, {
  // 指定在哪个单元格插入
  tl: { col: 2, row: dataArray.length+2 },
  // 指定图像大小
  ext: { width: 900, height: 500 }
});

基础表格 + 图片

// 导出 exel 表 包含图片
export function exportExcelWithImageAfterTable(name, dataArray, imageBase64=null) {
  // 创建工作簿和工作表
  const workbook = new Excel.Workbook()
  workbook.created = new Date()
  workbook.modified = new Date()
  const worksheet = workbook.addWorksheet('sheet1')

  // 添加表头
  const headers = Object.keys(dataArray[0]);
  worksheet.addRow(headers);

  // 在工作表中写入列表数据
  dataArray.forEach(data => {
    const rowValues = headers.map(header => data[header]);
    worksheet.addRow(rowValues);
  });
  // 在工作表中插入图片
  if (imageBase64) {
    const imageId = workbook.addImage({
      base64: imageBase64,
      extension: 'png',
    });
    worksheet.addImage(imageId, {
      // 指定在哪个单元格插入
      tl: { col: 2, row: dataArray.length+2 },
      // 指定图像大小
      ext: { width: 900, height: 500 }
    });
  }
  workbook.xlsx.writeBuffer().then(function (buffer) {
    const blob = new Blob([buffer], { type: 'application/octet-stream' });
    // 下载 Excel 文件
    const filename = `${name}.xlsx`;
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // 兼容IE浏览器
      window.navigator.msSaveBlob(blob, filename);
    } else {
      // 其他浏览器
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }).catch(e => {
    console.log('err', e)
  })
}