使用 ng2-pdfjs-viewer 使用 s3 签名的 url 显示 pdf

Question

我需要显示一个由 s3 签名的 url 返回的 pdf 作为文件对象。我正在尝试使用 ng2-pdfjs-viewer 来显示。但这似乎不起作用。

我尝试将 s3 url 直接用于 pdfSrc，但它不起作用。

component.html:

 <ng2-pdfjs-viewer pdfSrc="pdfUrl"></ng2-pdfjs-viewer>

组件.ts

previewProtocol(){
//this.spinner.show();
this.service.getS3Url(deviceType).subscribe((response) => {
    $('#BSModal').modal("show");
    console.log(response);
    this.pdfUrl = response;
   },
  (err)=> {

  });

}

Answer 1

编辑 2019 年 8 月 23 日

根据这个问题 - https://github.com/intbot/ng2-pdfjs-viewer/issues/9

其中一位用户将此添加为解决方案。可能会有一些帮助。

“我想跟进这件事，因为我正在将生成的 PDF 上传到 Amazon s3，然后尝试使用 s3 存储桶 URL 到 ng2-pdfjs，但在 Chrome 中遇到了 CORS 错误。s3 存储桶是一个公共存储桶，并且您可以在存储桶本身上配置 CORS 策略。默认情况下没有，这会产生这个奇妙的错误：

已被 CORS 政策阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

要解决此问题，您需要在存储桶上设置 CORS 策略：

转到 AWS 控制台 > S3 > 您的存储桶 > 权限 > CORS 配置并在 CORS 配置编辑器中添加类似的内容：“

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

"点击保存，您现在应该可以在 ng2-pdfjs 中加载 s3 存储桶 PDF。

https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

我希望这对将来使用 s3 和 ng2-pdfjs 的人有所帮助。”

旧答案 - 与此类场景相关

您可能无法直接将 url 设置为 pdf 查看器。而是调用 api 来返回字节数组。然后将字节数组输入到 ng2-pdfjs-viewer 组件中。

这是因为 url 是使用组件内的 location 属性设置的。因此，修改标头或 cors 可能无法正常工作。

请在此处查看问题：https://github.com/intbot/ng2-pdfjs-viewer/issues/36

实现这个工作的相关代码可能是

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

<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer 
    #pdfViewerOnDemand
    [externalWindow]="true"
    [downloadFileName]="'mytestfile.pdf'"
    [openFile]="false"
    [viewBookmark]="false"
    [download]="false"></ng2-pdfjs-viewer>
</div>
<div>
<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer #pdfViewerAutoLoad></ng2-pdfjs-viewer>
</div>

<!-- your.component.ts-->
import { Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...

export class MyComponent implements OnInit {
  @ViewChild('pdfViewerOnDemand') pdfViewerOnDemand;
  @ViewChild('pdfViewerAutoLoad') pdfViewerAutoLoad;
  ...

  constructor(private http: HttpClient) {
      let url = "api/document/getmypdf"; // Or your url
      this.downloadFile(url).subscribe(
          (res) => {
              this.pdfViewerAutoLoad.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
              this.pdfViewerAutoLoad.refresh(); // Ask pdf viewer to load/refresh pdf
          }
      );
  }

  private downloadFile(url: string): any {
        return this.http.get(url, { responseType: 'blob' })
            .pipe(
                map((result: any) => {
                    return result;
                })
            );
    }

  public openPdf() {
    let url = "url to fetch pdf as byte array"; // E.g. http://localhost:3000/api/GetMyPdf
    // url can be local url or remote http request to an api/pdf file. 
    // E.g: let url = "assets/pdf-sample.pdf";
    // E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // E.g: http://localhost:3000/api/GetMyPdf
    // Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html

    this.downloadFile(url).subscribe(
    (res) => {
        this.pdfViewerOnDemand.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
        this.pdfViewerOnDemand.refresh(); // Ask pdf viewer to load/reresh pdf
      }
    );
  }

仅供参考：我是这个包的作者。