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

Question

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

我试过直接使用 s3 url 到 pdfSrc 但它不起作用。

component.html:

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

component.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，但在 [=57= 中遇到了 CORS 错误]。s3 存储桶是一个 public 存储桶，您可以在存储桶本身上配置 CORS 策略。默认情况下有 none，这会产生这个奇妙的错误：

已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。

要解决此问题，您需要在存储桶上设置 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 到 return 字节数组。然后将字节数组送入 ng2-pdfjs-viewer 组件。

这是因为 url 是在组件中使用 location 属性设置的。因此修改 headers 或 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
      }
    );
  }

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

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

Use ng2-pdfjs-viewer to display pdf using s3 signed url

angular6

pdf.js

ng2-pdfjs-viewer