我正在try 使用其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文件中显示的表没有图像,我try 使用下面的代码访问它,但得到了以下停止编译的错误,尽管sole.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|CellInput’上不存在属性‘getElementsByTagName’. 类型"字符串"上不存在属性""getElementsByTagName"".""

当我试图保存pdf时,我得到:

区域-evergreen.js:2981 CORS策略阻止了对位于‘https://url/images/UPP02.png’From Origin‘http://localhost:4200’的XMLHttpRequest的访问:请求的资源上不存在‘Access-Control-Allow-Origin’标头.

错误:addImage不支持‘UNKNOWN’类型的文件,请确保添加了支持‘UNKNOWN’的插件. 在对象P(jspdf.es.min.js:86:93253) 在push../node_modules/jspdf/dist/jspdf.es.min.js.e.addImage

我到底做错了什么?

推荐答案

对于第一个问题,td变量是HTMLTableCellElement | CellInput型.

getElementsByTagName()只能从Element类型获得,HTMLTableCellElement继承Element类型.

因此,你必须把td算成HTMLTableCellElement.

要么

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

var td= data.cell.raw as HTMLTableCellElement;

F或 the 2nd issue, it seems the problem came from AWS S3 Bucket which implements the CORS and blocks your Angular app from accessing as it is not whitelisted.

You should configure the CORS rule to allow (whitelist) the "http://localhost:4200" in AllowedOrigins. Or enf或ce the wildcard (*) rule f或 AllowedOrigins but you may bear the risk as this will allow all 或igins. You may refer to CORS configuration f或 AWS.

Angular相关问答推荐

Angular v12:Uncatch(in promise):ReferenceError:d3 is not defined ReferenceError:d3 is not defined

angular 17:app.config. server.ts中的mergeApplicationconfig导致初始化在app.config. ts中导入的提供程序

PrimeNG侧栏清除primeNG消息.为什么?

Angular 17:在MouseOver事件上 Select 子组件的正确ElementRef

Angular 17-getEnvironment InjectorProviders出现异常

如何修复不允许的HttpErrorResponse 405?

如何让 ag-Grid 事件读取私有方法?

BehaviorSubject 在 Angular 中制作数据之间的时间表(或计时器)

包含与 ngFor 相关内容的 HTML 输入

无法推送 Angular 项目 - Github

ng test 和 ng e2e 之间的真正区别是什么

可从 Angular2 中的

使用directive指令将类添加到host元素中

如何在数据表angular material中显示空消息,如果未找到数据

模块AppModule导入的意外指令LoginComponent,请添加@NgModule 注释

Angular 2 通过 [class.className] 绑定添加多个类

如何以Angular 获取嵌套表单组的控件

NgrxStore 和 Angular - 大量使用异步管道或在构造函数中只订阅一次

如何以编程方式触发`valueChanges`?

如何处理Angular2中的查询参数