如何使用PDF.js预构建查看器加载Base64编码的PDF文件

要让PDF.js预构建查看器加载Base64数据而非URL，核心是覆盖查看器的默认文档加载逻辑，直接传入解码后的PDF二进制数据。下面是两种可行的实现方案：

方案1：直接修改查看器页面（viewer.html） #

如果可以直接编辑预构建包中的viewer.html，这是最直接的方式：

1. 准备纯Base64数据：移除Base64字符串开头的data:application/pdf;base64,前缀，只保留编码后的核心内容。
2. 注入自定义初始化脚本：在viewer.html中，找到引入viewer.js的标签，在它之前添加以下代码：

<script>
// 替换为你的纯Base64 PDF数据
const rawPdfBase64 = "JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PC9MZW5ndGggNiAwIFIvRmlsdGVyIC9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nE2NuwoCQQxF+/mKx8tNcEUSMhBQnG...";

// 将Base64转为PDF.js可识别的Uint8Array
function base64ToUint8Array(base64Str) {
  const rawChars = window.atob(base64Str);
  const uint8Array = new Uint8Array(rawChars.length);
  for (let i = 0; i < rawChars.length; i++) {
    uint8Array[i] = rawChars.charCodeAt(i);
  }
  return uint8Array;
}

// 覆盖默认加载逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 阻止查看器自动加载默认文档
  PDFViewerApplication.autoLoad = false;
  
  // 初始化完成后加载自定义PDF
  PDFViewerApplication.initialize().then(() => {
    const pdfBinaryData = base64ToUint8Array(rawPdfBase64);
    PDFViewerApplication.open(pdfBinaryData);
  });
});
</script>
<script src="viewer.js"></script>

这段代码的作用：

• 解码Base64为二进制数组（Uint8Array），这是PDF.jsopen方法支持的输入类型之一
• 关闭查看器的自动加载逻辑，避免默认PDF干扰
• 初始化完成后手动传入二进制数据渲染PDF

方案2：通过iframe嵌入并使用postMessage传递数据 #

如果需要在父页面中嵌入查看器，可通过postMessage跨帧传递Base64数据：

父页面代码 #

<iframe id="pdfViewerFrame" src="viewer.html" width="100%" height="800"></iframe>

<script>
const targetPdfBase64 = "你的纯Base64数据";
const viewerFrame = document.getElementById('pdfViewerFrame');

// 等待iframe加载完成后发送数据
viewerFrame.addEventListener('load', () => {
  viewerFrame.contentWindow.postMessage({
    type: 'LOAD_BASE64_PDF',
    payload: targetPdfBase64
  }, 'https://your-viewer-domain.com'); // 生产环境替换为查看器的实际域名，避免安全风险
});
</script>

查看器页面（viewer.html）修改 #

同样在viewer.js引入前添加监听脚本：

<script>
window.addEventListener('message', (event) => {
  // 生产环境必须验证event.origin，只信任合法域名
  if (event.origin !== 'https://your-parent-domain.com') return;
  
  if (event.data.type === 'LOAD_BASE64_PDF') {
    function base64ToUint8Array(base64Str) {
      const rawChars = window.atob(base64Str);
      const uint8Array = new Uint8Array(rawChars.length);
      for (let i = 0; i < rawChars.length; i++) {
        uint8Array[i] = rawChars.charCodeAt(i);
      }
      return uint8Array;
    }

    PDFViewerApplication.autoLoad = false;
    PDFViewerApplication.initialize().then(() => {
      const pdfBinary = base64ToUint8Array(event.data.payload);
      PDFViewerApplication.open(pdfBinary);
    });
  }
});
</script>
<script src="viewer.js"></script>

注意事项 #

• Base64前缀处理：必须移除data:application/pdf;base64,前缀，否则atob解码会失败
• 版本兼容性：确保使用的PDF.js预构建包版本稳定，不同版本的PDFViewerApplicationAPI可能略有差异
• 安全问题：使用postMessage时，一定要验证event.origin，避免跨域恶意数据注入

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