使用ExcelJS在Node/Angular中添加多图与表格遇tl未定义错误求助

错误原因分析 #

1. base64格式错误：你的代码中base64Image包含了data:image/png;base64,前缀，但ExcelJS的addImage方法要求base64字段仅传入纯base64编码字符串，不需要这个前缀。这会导致图片对象创建失败，后续调用worksheet.addImage时传入无效的图片对象，触发读取'tl'属性的错误。
2. 版本兼容性问题：部分旧版ExcelJS（v3.x及以下）中，位置参数需使用topLeft和bottomRight而非tl和br。

修正后的代码示例 #

Node.js环境（支持直接写入文件） #

const ExcelJS = require('exceljs');

async function generateExcelWithImagesAndTable() {
  // 模拟多个纯base64编码的图片字符串（需替换为实际内容）
  const pureBase64List = [
    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
    'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
  ];

  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('图文汇总');

  // 添加表格结构与数据
  worksheet.columns = [
    { header: '序号', key: 'index', width: 8 },
    { header: '商品名称', key: 'name', width: 25 },
    { header: '价格', key: 'price', width: 12 }
  ];
  worksheet.addRows([
    { index: 1, name: '测试商品1', price: '¥99' },
    { index: 2, name: '测试商品2', price: '¥199' }
  ]);

  // 插入第一张图片（表格右侧）
  const image1 = worksheet.addImage({
    base64: pureBase64List[0],
    extension: '.png'
  });
  worksheet.addImage(image1, {
    tl: { col: 4, row: 1 },
    br: { col: 6, row: 5 }
  });

  // 插入第二张图片（表格下方）
  const image2 = worksheet.addImage({
    base64: pureBase64List[1],
    extension: '.png'
  });
  worksheet.addImage(image2, {
    tl: { col: 1, row: 7 },
    br: { col: 3, row: 11 }
  });

  // 保存Excel文件
  await workbook.xlsx.writeFile('./商品汇总.xlsx');
  console.log('Excel文件生成完成');
}

generateExcelWithImagesAndTable().catch(err => console.error(err));

Angular环境（浏览器端导出下载） #

import { Component } from '@angular/core';
import * as ExcelJS from 'exceljs';

@Component({
  selector: 'app-excel-export',
  template: '<button (click)="exportExcel()">导出图文Excel</button>'
})
export class ExcelExportComponent {

  async exportExcel() {
    // 模拟纯base64图片字符串
    const pureBase64List = [
      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
      'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    ];

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('图文汇总');

    // 添加表格
    worksheet.columns = [
      { header: '序号', key: 'index', width: 8 },
      { header: '商品名称', key: 'name', width: 25 },
      { header: '价格', key: 'price', width: 12 }
    ];
    worksheet.addRows([
      { index: 1, name: 'Angular测试商品1', price: '¥99' },
      { index: 2, name: 'Angular测试商品2', price: '¥199' }
    ]);

    // 插入图片
    const image1 = worksheet.addImage({
      base64: pureBase64List[0],
      extension: '.png'
    });
    worksheet.addImage(image1, {
      tl: { col: 4, row: 1 },
      br: { col: 6, row: 5 }
    });

    const image2 = worksheet.addImage({
      base64: pureBase64List[1],
      extension: '.png'
    });
    worksheet.addImage(image2, {
      tl: { col: 1, row: 7 },
      br: { col: 3, row: 11 }
    });

    // 浏览器端导出为Blob并下载
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '商品汇总.xlsx';
    a.click();
    window.URL.revokeObjectURL(url);
  }
}

关键注意事项 #

• 处理base64前缀：如果你的原始base64字符串带data:image/png;base64,前缀，用base64Image.split(',')[1]提取纯编码部分。
• 版本适配：若使用v3.x及以下版本的ExcelJS，将位置参数的tl改为topLeft，br改为bottomRight。
• Angular配置：安装ExcelJS后，若遇到编译错误，需在angular.json的build.options中添加"allowedCommonJsDependencies": ["exceljs"]。

内容的提问来源于stack exchange，提问作者Deepali Pawar