如何让图像在 Angular 的 jspdf 自动表中工作

问题描述

我创建了一个 Angular 项目，我正在使用 jsPDF 自动表导出一个 HTML 表。表格导出正常，除了我试图在表格中导出要导出的图像。

我正在使用 html2canvas 将 div 元素转换为运行良好的图像。当我运行 ng serve 时，图像出现在 HTML 表格中，但是当我导出为 PDF 时，图像应该在的表格单元格是空的。

我已经按照此处的实时示例尝试使图像出现在打印的表格中：https://codepen.io/someatoms/pen/vLYXWB 但是我遇到了一些我无法弄清楚的错误。

以下是我的代码的相关部分（一些名称已更改为通用内容）：

component.html

<button id="downloadButton" type="button" (click)="downloadPDF()">
    Download PDF
</button>
<table id="my-table">
    <thead>
      <tr>
        <th colspan="5">Title</th>
      </tr>
      <tr>
        <th colspan="5">Subtitle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5" id="my-image">
          <!-- This is where the image will be injected -->
        </td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th>heading 1</th>
        <th>heading 2</th>
        <th>heading 3</th>
        <th>heading 4</th>
        <th>heading 5</th>
      </tr>
    </thead>
    <tr *ngFor="let thing of things">
      <td>{{ thing.one }}</td>
      <td>{{ thing.two }}</td>
      <td>{{ thing.three }}</td>
      <td>{{ thing.four }}°</td>
      <td>{{ thing.five }}m</td>
    </tr>
  </table>

component.ts

  downloadPDF(){
    this.convertimage();
    let date = new Date();
    date.getTime();
    let dateString = String(date + '.pdf')

    const doc = new jspdf.jsPDF()

    autoTable(doc,{ html: '#my-table',bodyStyles: {minCellHeight: 15},didDrawCell: function(data) {
      if (data.row.index === 2 && data.cell.section === 'body') {
         var td = data.cell.raw;
         var img = td.getElementsByTagName('img')[0];
         var dim = data.cell.height - data.cell.padding('vertical');
         var textPos = data.cell.textPos;
         doc.addImage(img.src,textPos.x,textPos.y,dim,dim);
      }
    }},)

    doc.save(dateString)
  };

  convertimage() {
    html2canvas(document.getElementById("my-div")).then(function (canvas) {
      const converted = canvas.toDataURL("image/jpg",0.9);
      var img = document.createElement('img');
      img.src = converted;
      document.getElementById('my-image').appendChild(img);
    });
  }

我在“var img = td.getElementsByTagName('img')[0];”中遇到的两个主要问题

• 属性“getElementsByTagName”在类型“HTMLTableCellElement”上不存在 |细胞输入'。 属性“getElementsByTagName”在类型“string”上不存在。ts(2339)

另一个在它下面的 2 行，位于“var textPos = data.cell.textPos;”

• 'Cell'.ts(2339) 类型不存在属性 'textPos'

我在这里错过了什么，我发布的链接中的现场示例有我没有的？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）