JsPDF Autotable 将图像添加到列会出现错误：属性“getElementsByTagName”不存在

Question

我正在尝试使用其 url 从 AWS S3 存储桶添加图像，数据格式如下所示：

[{
  netValue: 13702.5,
  prodCode: "UPP",
  prodDesc: "Privacy Panel",
  prodImg: "https://url/images/UPP02.png",
  prodQty: 20,
  unitPrice: 870
}]

我的 html 文件中的表格如下所示：

<table class="table table-hover table-responsive-xxl table-bordered" id="prodTable" #prodTable>
    <thead>
        <tr class="table-reflow">
            <th>S. N</th>
            <th>Product Code</th>
            <th>Description</th>
            <th>Image</th>
            <th>Qty</th>      
            <th>Price</th>      
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let prod of prodDetailsArr; let i = index">
            <td>{{ i+1 }}</td>
            <td>{{ prod.prodCode }}</td>
            <td>{{ prod.prodDesc }}</td>
            <td><img [src]="prod.prodImg"></td>
            <td>{{ prod.prodQty }}</td>
            <td>{{ prod.unitPrice }}</td>
            <td>{{ prod.netValue }}</td>
        </tr>
    </tbody>
</table>

当表格在 PDF 文件中显示时没有其图像时，我尝试使用下面的代码来访问它，但出现以下错误并停止编译，即使 console.log(td) 提供了正确的 img 及其 src：

autoTable(doc, { 
      html: '#prodTable',
      startY: 200,                    
      theme: 'plain',
      tableLineColor: [0, 0, 0],
      tableLineWidth: 0.5,
      margin: {
        left: 5,
        right: 7
      },
      didDrawCell: function(data) {
        if (data.column.index === 3 && data.cell.section === 'body') {
          var td = data.cell.raw;
          console.log(td)
          var img = td.getElementsByTagName('img')[0];
          var dim = data.cell.height - data.cell.padding('vertical');
          doc.addImage(img.src, data.cell.x,  data.cell.y, dim, dim);         
        }
      }
    })

“HTMLTableCellElement | 类型”上不存在属性“getElementsByTagName”单元格输入'。 类型“string”上不存在属性“getElementsByTagName”。

当我尝试保存 pdf 时，我得到：

zone-evergreen.js:2981 从源“http://localhost:4200”访问“https://url/images/UPP02.png”处的 XMLHttpRequest 已被 CORS 策略阻止：没有“Access-Control-Allow” -Origin'标头存在于请求的资源上。

ERROR 错误：addImage 不支持“UNKNOWN”类型的文件，请确保添加“UNKNOWN”支持的插件。 在 Object.P (jspdf.es.min.js:86:93253) 在push../node_modules/jspdf/dist/jspdf.es.min.js.e.addImage

这是说明问题的 stackblitz 当我尝试将图像插入表中时，出现错误，指出“PNG 文件不完整或损坏”。我正在使用 jspdf: ^2.5.1 和 jspdf-autotable: ^3.5.31，以及 Angular 8。

我究竟错在哪里？

Answer 1

对于第一期，

td

变量是

HTMLTableCellElement | CellInput

类型。

getElementsByTagName()

仅适用于

Element

类型，

HTMLTableCellElement

继承

Element

类型。

因此你必须将

td

转换为

HTMLTableCellElement

。

要么

var img = (td as HTMLTableCellElement).getElementsByTagName('img')[0];

或

var td= data.cell.raw as HTMLTableCellElement;

对于第二个问题，问题似乎来自 AWS S3 Bucket，它实现了 CORS 并阻止您的 Angular 应用程序访问，因为它不是白名单。

您应该配置 CORS 规则以允许（白名单）AllowedOrigins 中的“http://localhost:4200”。或者对 AllowedOrigins 强制使用通配符 (*) 规则，但您可能需要承担风险，因为这将允许所有来源。您可以参考AWS的CORS配置。