如何在PDF.js中改造viewer.html以实现PDF的动态加载

在PDF.js中改造viewer.html实现PDF动态加载，需结合参数传递、文件流处理及跨域配置等技术。以下是综合多个技术方案的核心实现步骤：

​一、基础参数传递法​

1. ​URL参数动态加载​

通过修改viewer.html的URL参数传递PDF路径，适用于静态文件或服务端直链：

• ​实现方式​：在viewer.html的URL后添加?file=参数，例如：

  html
  运行
  复制
  <iframe src="viewer.html?file=http://example.com/doc.pdf"></iframe>
  

• ​关键代码调整​：在viewer.js中注释或修改跨域检查代码，并在webViewerInitialized事件中解析URL参数：

  javascript
  复制
  const urlParams = new URLSearchParams(window.location.search);
  const pdfUrl = urlParams.get('file');
  PDFViewerApplication.open(pdfUrl);
  

​二、文件流动态加载​

2. ​通过Ajax获取二进制流​

适用于后端返回PDF字节流而非静态链接的场景：

1. ​前端改造​：在viewer.html中添加Ajax请求逻辑（需在引入viewer.js前执行）：

   javascript
   复制
   fetch('/api/get-pdf-stream')
     .then(response => response.arrayBuffer())
     .then(data => {
       const uint8Array = new Uint8Array(data);
       PDFViewerApplication.open(uint8Array);
     });
   

2. ​后端要求​：响应头需设置Content-Type: application/pdf，并处理CORS。

3. ​Base64数据加载​

若需处理Base64编码的PDF数据：

javascript
复制
const base64ToUint8Array = (base64) => {
  const binaryString = atob(base64.split(',')[1]);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes;
};
PDFViewerApplication.open(base64ToUint8Array(base64Data));

​三、跨框架通信方案​

4. ​使用postMessage传递数据​

当viewer.html嵌入iframe时，通过父子页面通信传递PDF数据：

• ​父页面发送数据​：

  javascript
  复制
  const iframe = document.getElementById('pdfFrame');
  iframe.contentWindow.postMessage({
    action: 'loadPdf',
    data: pdfBytes // 可以是URL、Uint8Array或Base64
  }, '*');
  

• ​子页面（viewer.html）监听​：

  javascript
  复制
  window.addEventListener('message', (event) => {
    if (event.data.action === 'loadPdf') {
      PDFViewerApplication.open(event.data.data);
    }
  });
  

  此方法可绕过sessionStorage的5MB限制。

​四、深度定制viewer.js​

5. ​核心代码修改​

• ​禁用默认文件加载​：删除或注释viewer.js中DEFAULT_URL的定义。

• ​事件触发时机​：在webViewerLoaded事件中动态注入加载逻辑，确保PDF.js初始化完成后再操作：

  javascript
  复制
  PDFViewerApplication.initializedPromise.then(() => {
    // 动态加载代码
  });
  

​五、跨域与安全处理​

6. ​跨域配置​

• ​服务端​：设置响应头Access-Control-Allow-Origin: *。

• ​PDF.js改造​：在viewer.js中注释以下代码段以禁用跨域检查：

  javascript
  复制
  if (origin !== viewerOrigin && protocol !== 'blob:') {
    throw new Error('跨域禁止');
  }
  

7. ​电子签章兼容性​

在pdf.worker.js中注释签名验证代码段：

javascript
复制
// 注释以下三行（约第2000行）
if (this.fieldType === 'Sig') {
  this._setFlags(AnnotationFlag.HIDDEN);
}

​六、性能优化建议​

1. ​按需渲染​：参考PDF.js的分页渲染机制，仅预加载可视区域页面。

2. ​内存管理​：调用PDFViewerApplication.close()释放已卸载文档内存。

3. ​错误处理​：监听documentloaderror事件实现容错：

   javascript
   复制
   PDFViewerApplication.eventBus.on('documentloaderror', (err) => {
     console.error('加载失败:', err);
   });
   

​扩展场景示例​

动态加载加密PDF

javascript
复制
PDFViewerApplication.open({
  url: 'encrypted.pdf',
  password: 'user123'
}).catch(reason => {
  // 弹出密码输入框
  PDFViewerApplication.pdfViewer.passwordPrompt();
});

通过上述方案，可实现从URL、二进制流、Base64、跨框架通信等多渠道动态加载PDF，同时解决电子签章、跨域限制等疑难问题。具体实现需根据项目架构选择合适的技术组合。