如何将 blob（来自服务器的响应）插入 ngx-extended-pdf-viewer？

Question

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

现在我必须使用来自服务器的响应（returns BLOB）和显示文件。我试图将响应归因于变量，然后在 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
      }
    );
  }

如何将 blob（来自服务器的响应）插入 ngx-extended-pdf-viewer？

How to insert blob (response from server) into ngx-extended-pdf-viewer?

javascript

angular

pdf

blob

pdf-viewer