ng2-pdfjs-viewer最新版本CDN环境下Blob URL加载失败求助

可行方案 #

1. 强制关闭IFrame模式 #

新版本的ng2-pdfjs-viewer提供了关闭IFrame渲染的配置项，只需在组件标签中添加[useIframe]="false"参数，就能恢复旧版本的渲染逻辑，Blob URL即可正常加载：

<ng2-pdfjs-viewer #externalPdfViewer
                  [hidden]="error()"
                  viewerId="DocumentPdfViewer"
                  [viewerFolder]="https://cdn.some.url/pdfjs"
                  [useIframe]="false"
                  (onDocumentLoad)="onDocumentLoad()">
</ng2-pdfjs-viewer>

2. 转用Base64字符串传递文件 #

如果必须保留IFrame模式，可以将Blob文件转换为Base64编码字符串后传递给组件，彻底规避跨域问题：

// 工具函数：Blob转Base64
const blobToBase64 = (blob: Blob): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};

// 加载并设置PDF
const pdfBlob = await this.getPdfAsBlob(downloadUrl); // 修改原有方法，直接返回Blob对象
const base64Pdf = await blobToBase64(pdfBlob);
this.externalPdfViewer().pdfSrc = base64Pdf;
this.externalPdfViewer().refresh();

额外提示 #

若上述方案都不适用，可尝试为CDN配置CORS规则，允许你的域名访问资源，但考虑到你提到文档加载流程复杂无法直接提供文件URL，这个方案实用性较低。

内容的提问来源于stack exchange，提问作者Vetal