如何将blob (来自服务器的响应)插入到ngx-extended-pdf-viewer中？

Question

我正在设置一个包含pdf查看器的新视图。我没有任何到pdf文件的路径，只是后端返回给我一个包含pdf的blob对象，我必须显示这个pdf。现在我使用的是ngx-extended-pdf-viewer库(链接：https://www.npmjs.com/package/ngx-extended-pdf-viewer)

现在我必须使用来自服务器的响应(返回BLOB)并显示文件。我尝试将response赋予变量，然后在HTML中通过异步管道使用它。下一次尝试是添加新的FileReader对象，在其中传递blob并将其放入src属性中。在这两种情况下，浏览器不会显示pdf并直接下载它。

我的所有尝试：https://ghostbin.com/paste/57akz

编辑：https://ghostbin.com/paste/rb8ou

我只想在src中使用我的blob对象，在不下载pdf文件的情况下正确显示它，等等。

Answer 1

虽然我还没有使用过前述的库，但我在使用blob对象和ng2-pdfjs-viewer(https://www.npmjs.com/package/ng2-pdfjs-viewer)构建pdf密集型门户网站方面取得了相当大的成功。

blob对象的用例如下

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>

<!-- your.component.ts-->
export class SampelComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer
  ...

  private downloadFile(url: string): any {
    return this.http.get(url, { responseType: ResponseContentType.Blob }).map(
      (res) => {
        return new Blob([res.blob()], { type: "application/pdf" });
      });
  }

  public openPdf() {
    let url = "url to fetch pdf as byte array"; (Blob works here)
    this.downloadFile(url).subscribe(
     (res) => {
        this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
        this.pdfViewer.refresh(); // Ask pdf viewer to load/reresh pdf
      }
    );
  }