编辑 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 的人有所帮助。”
旧答案 - 与这样的场景相关
您可能无法直接将 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
}
);
}
仅供参考:我是这个包的作者。