Question

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

我尝试将s3网址直接用于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上传到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来帮助某人。”

旧答案-与此类情况有关

您可能无法直接将网址设置为pdf查看器。而是调用一个API返回bytearray。然后将字节数组送入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
      }
    );
  }

仅供参考：我是该软件包的作者。

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

1 个答案: