Question

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

现在，我必须使用服务器（返回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？

1 个答案: