从流中显示 ng2-pdf-viewer PDF答案

【问题标题】：Displaying ng2-pdf-viewer PDF from stream从流中显示 ng2-pdf-viewer PDF
【发布时间】：2022-11-28 11:16:30
【问题描述】：

我有一个使用 ng2-pdf-viewer 的页面：

<pdf-viewer [src]="fileToDownload" [render-text]="true" style="display: block;"></pdf-viewer>

有一个节点 API 可以填充该 PDF 并返回一个 URL：

this.httpClient.post(APIURL, JSON.stringify(body), options).subscribe(
      result => {
        let apiResponse: any = result;
          if (apiResponse.success == 1) {
            this.showPreviewPDF = true;
            let myfileToDownload = sessionStorage.getItem('endPoint') + "downloads/" + apiResponse.file;
            this.httpClient.get(myfileToDownload, { responseType: 'arraybuffer' })
              .subscribe((file: ArrayBuffer) => {
                this.fileToDownload = new Uint8Array(file);
              });
          }

      },
      error => {

      });

然后我得到 PDF 的流。我可以在控制台网络上完美地看到 PDF，但我无法显示它。

我检查了几个例子，包括改变这个

this.fileToDownload = new Uint8Array(file);

这样

this.fileToDownload = file;

但我仍然无法在屏幕上显示 PDF。如果我将 PDF 指向 Node 外部的文件夹，但不是作为流，它工作正常。

谢谢。

【问题讨论】：

嗨，K J。在 Safari 中，当检查“网络”选项卡时，我可以看到 PDF 文档及其完美流式传输。我只是在 pdf-viewer 上显示它时遇到问题。谢谢。

标签： angular

【解决方案1】：

在您的 .ts 文件中使用创建临时 url

this.tempurl = window.URL.createObjectURL(streamValue);

在你的 .html 文件中应用这个 url。

 <pdf-viewer
                [src]="blobUrl"
                [rotation]="0"
                [original-size]="false"
                [show-all]="true"
                [fit-to-page]="false"
                [zoom]="1"
                [zoom-scale]="'page-width'"
                [stick-to-page]="false"
                [render-text]="true"
                [external-link-target]="'blank'"
                [autoresize]="true"
                [show-borders]="false"
                style="width: 100%; height: 600px;"
              ></pdf-viewer>

【讨论】：