使用ng2-pdfjs-查看器使用s3签名的url显示pdf。

Question

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

我尝试将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

编辑08/23/2019

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

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

“当我将生成的PDF上传到亚马逊s3，然后尝试将s3桶URL上传到ng2-pdfjs，但在Chrome中碰到CORS错误时，我想跟进这个问题。s3存储桶是一个公共存储桶，可以在存储桶上配置CORS策略。在默认情况下，没有这样的错误，这就产生了这个美妙的错误：

已被CORS策略阻止:请求的资源上没有“访问-控制-允许-原产地”标头。

要解决这个问题，您需要在桶上设置一个CORS策略：

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

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

“单击Save，您现在应该能够在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组件中。

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

FYI:我是这个包裹的作者。