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

Question

我正在尝试使用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

我一直在寻找解决这个问题的方法，但我无法弄清楚。任何帮助将不胜感激。

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

Answer 1

我注意到您已经在多个论坛上发布了此问题。我希望这次您已经解决了这个问题。如果您没有，这是我的解决方案：

所以问题是我的API（我想是您的API）正在返回流。这显然不适用于ng2-pdf-viewer。可以使用的是字符串，对象和UInt8Arrays。

如果像我一样，由于很多其他逻辑都不希望更改API的实际响应，则可以在前端对其进行转换。这是通过设置HttpResponseType：

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

这本质上是在将响应转换为arraybuffer可以消费的东西json。我就是这样理解的。有关此问题的更多信息，请参见Angular存储库问题。

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

我希望这有帮助！