为什么我的Angular应用使用ng2-pdf-viewer时部分PDF无法渲染

常见原因1：CORS跨域限制 #

这是最高发的问题，ng2-pdf-viewer底层依赖pdf.js实现渲染，浏览器请求跨域PDF资源时，如果目标资源的响应头未配置允许当前前端域名访问的CORS规则，请求会被浏览器直接拦截，导致PDF加载失败。你用的官方测试链接提前配置了跨域允许规则所以可以正常加载，大部分第三方公网PDF链接默认不会开放跨域权限，所以会出现空白。
对应解决方法：

• 如果PDF存储在你可控的服务端，直接在服务端响应头添加Access-Control-Allow-Origin配置，放开你的前端域名访问权限即可。
• 如果是第三方不可控的PDF链接，可以自行搭建代理转发服务，前端先请求你的代理服务，由代理服务请求第三方PDF资源后返回给前端，绕开跨域限制。本地开发阶段也可以通过配置Angular代理配置临时解决跨域问题。

常见原因2：资源权限验证不通过 #

部分PDF链接需要携带身份凭证（cookie、请求头token等）才能正常访问，你当前配置里withCredentials设为false，如果目标资源需要身份验证就会返回401/403错误，无法加载资源。
对应解决方法：
如果目标资源需要身份验证，将pdfSource中的withCredentials改为true，同时确保服务端配置了允许跨域请求携带凭证。

常见原因3：PDF资源本身不符合要求 #

• 部分PDF是加密、损坏或者版本过高，超出pdf.js支持的版本范围，会出现渲染空白。
• 部分你以为的PDF链接实际是中间跳转链接，并非直接的PDF二进制资源地址，pdf.js无法自动跟随跳转加载。
  对应解决方法：
• 先直接在浏览器新标签页打开目标链接，确认可以正常访问、没有跳转、没有加密提示，确认是有效PDF资源。
• 可以先把PDF下载到本地，换成本地路径测试加载，排除资源本身的问题。

常见原因4：代码缺少错误监听无法定位问题 #

你当前的代码没有绑定错误事件，无法拿到具体报错信息，建议先补充事件绑定排查具体原因：

1. 补全app.component.html的标签和事件绑定：

<pdf-viewer [src]="pdfSource"
          [render-text]="true"
          style="display: block;"
          (error)="onPdfError($event)"
          (after-load-complete)="onPdfLoaded($event)">
</pdf-viewer>

提示：你当前贴出的html代码中pdf-viewer标签没有闭合，也可能导致组件渲染异常，需要先补全闭合标签。
2. 在app.component.ts中添加事件处理方法：

onPdfError(error: any) {
  console.error('PDF加载错误: ', error);
}

onPdfLoaded(pdf: any) {
  console.log('PDF加载成功，总页数：', pdf.numPages);
}

添加后打开浏览器控制台，根据打印的错误信息就能精准定位具体问题。

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