使用ng2-pdf-viewer在Angular中显示PDF文件

发布时间：2020-12-17 17:10:40 所属栏目：安全来源：网络整理

导读：我正在尝试使用 ng2-pdf-viewer组件从我的ASP.NET Web API后端显示多个PDF.我已经将PdfViewerComponent添加到我的模块的声明中,并且提供的示例工作正常： import { Component } from '@angular/core';@Component({ selector: 'example-app',template: ` div

我正在尝试使用 ng2-pdf-viewer组件从我的ASP.NET Web API后端显示多个PDF.我已经将PdfViewerComponent添加到我的模块的声明中,并且提供的示例工作正常：

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;">
  </pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
}

当我尝试从我的任何其他资源加载pdf src时出现问题.

我第一次遇到CORS问题,但后来我用DomSanitizer解决了这个问题.每当我尝试加载PDF时出现的新错误是：

ERROR Error: Invalid parameter object: need either .data,.range or .url
    at Object.getDocument (pdf.js:2867)
    at PdfViewerComponent.webpackJsonp.../../../../ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.loadPDF

我已经搜索了高低问题的解决方案,但我无法理解.任何帮助将深表感谢.

如果您希望我提供任何其他信息,请告诉我.

解决方法

我注意到你已经在几个论坛上发布了这个问题.我希望在这个时候你已经解决了这个问题.如果你没有,这是我的解决方案：

所以问题是我的API(以及你的假设)正在返回一个流.这显然不适用于ng2-pdf-viewer.使用它的是strings,objects,and UInt8Arrays.

如果像我一样,你并不热衷于改变API的实际响应,因为许多其他逻辑依赖于它,你可以在前端转换它.这是通过设置HttpResponseType来完成的：

this.http.get(
  `/url/to/photo/stream`,{responseType: 'arraybuffer' as 'json'}
)

这基本上做的是将类型缓冲的响应强制转换为可以使用的东西：json.这是我理解它的方式.有关这方面的更多信息,请参见Angular repository issues.

现在,ng2-pdf-viewer可以读取此调用的响应！

我希望这有帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!