如何使用ngx-extended-pdf-viewer加载显示file:///协议的本地PDF文件

所有现代浏览器都存在同源安全限制，运行在http/https协议下的Web应用无权直接访问file://协议指向的本地文件，哪怕你从URL参数里提取到了正确的本地路径，直接传给ngx-extended-pdf-viewer的src属性也会被浏览器拦截，导致资源加载失败，触发「Missing PDF」报错。这是浏览器的默认安全策略，没有前端层面的黑科技可以直接绕过。

• 方案1：替换为用户主动上传逻辑 #

  放弃要求用户传入file://格式路径的交互，页面提供<input type="file" accept=".pdf">文件选择入口，由用户主动选中本地PDF文件后，将文件转换为Blob URL传入组件即可正常加载。
  参考代码：

  // 绑定到文件选择器的change事件
  handlePdfSelect(e: Event): void {
    const target = e.target as HTMLInputElement
    const pdfFile = target.files?.[0]
    if (pdfFile?.type === 'application/pdf') {
      this.sourceUrl = URL.createObjectURL(pdfFile)
    }
  }
  
  // 组件销毁时释放内存，避免内存泄漏
  ngOnDestroy(): void {
    if (this.sourceUrl) {
      URL.revokeObjectURL(this.sourceUrl)
    }
  }
  

• 方案2：后端代理中转 #

  如果你有配套后端服务，且后端服务有权限访问对应路径的本地PDF文件，可以把提取到的本地路径传给后端接口，后端读取文件后以文件流的形式返回，你直接把后端接口地址作为src传入组件即可。
  示例src格式：/api/loadLocalPdf?filePath=/path/filename.pdf

• 方案3：桌面端应用适配 #

  如果你的应用是Electron等打包的本地桌面端应用，可以通过两种方式处理：
  • 关闭Electron的webSecurity限制（仅适用于内部使用的应用，存在安全风险，不推荐对外发布的产品使用）
  • 通过Electron主进程读取本地PDF文件，转成Blob URL后传给渲染层的PDF组件

纯线上公开Web应用不存在直接读取用户本地file://路径的可能性，必须走用户主动上传文件的流程。

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer