Angular中jsPDF autotable导出表格嵌入图片报错怎么解决？

核心问题说明 #

你遇到的问题主要来自三个方面：

1. TypeScript的静态类型检查限制，你参考的示例是原生JS环境没有类型校验，不会触发相关报错
2. 你使用的jsPDF-autotable是新版本，和参考示例的旧版本API不兼容，textPos属性已经被移除
3. html2canvas是异步方法，你调用转换后直接导出，此时图片还未插入到DOM中，导致单元格为空

具体报错修复 #

1. getElementsByTagName不存在报错 #

这是因为TS推断data.cell.raw的类型是HTMLTableCellElement | CellInput联合类型，无法确定它是DOM元素，需要添加类型断言：

// 把 var td = data.cell.raw; 替换为
const td = data.cell.raw as HTMLTableCellElement;

2. textPos不存在报错 #

新版本autotable已经移除了textPos属性，单元格的坐标可以直接从data.cell的x/y属性配合内边距计算得到：

// 把 var textPos = data.cell.textPos; 替换为
const imgX = data.cell.x + data.cell.padding('left');
const imgY = data.cell.y + data.cell.padding('top');

导出PDF单元格为空修复 #

需要把convertImage改为返回Promise，等图片转换、插入DOM完成后再执行导出逻辑，修改后完整代码如下：

// convertImage改为返回Promise
convertImage(): Promise<void> {
  return new Promise((resolve) => {
    html2canvas(document.getElementById("my-div")).then(function (canvas) {
      const converted = canvas.toDataURL("image/jpg", 0.9);
      const img = document.createElement('img');
      img.src = converted;
      document.getElementById('my-image').appendChild(img);
      resolve();
    });
  })
}

async downloadPDF(){
  // 等待图片转换插入完成
  await this.convertImage();
  const date = new Date();
  const dateString = `${date}.pdf`;
  const doc = new jspdf.jsPDF();

  autoTable(doc, { 
    html: '#my-table', 
    bodyStyles: {minCellHeight: 15},
    didDrawCell: (data) => {
      // 可自行打印data.row.index确认图片行的正确索引
      if (data.row.index === 0 && data.cell.section === 'body') {
         const td = data.cell.raw as HTMLTableCellElement;
         const img = td.getElementsByTagName('img')[0];
         if(!img) return; // 空判断避免异常
         const dim = data.cell.height - data.cell.padding('vertical');
         const imgX = data.cell.x + data.cell.padding('left');
         const imgY = data.cell.y + data.cell.padding('top');
         doc.addImage(img.src, 'JPEG', imgX,  imgY, dim, dim);
      }
    }
  });
  doc.save(dateString);
};

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