如何在PDF.js Viewer添加注释后获取PDF的Base64或二进制数据

你可以通过以下步骤获取包含所有注释的PDF二进制数据，再转成Base64：

• 先拿到当前加载的PDF文档实例，用你已能访问的PDFViewerApplication获取：

  const pdfDoc = PDFViewerApplication.pdfDocument;
  

• 调用文档的save方法，生成包含所有注释和修改的二进制数据（Uint8Array格式）：

  const pdfBytes = await pdfDoc.save({
    updateMetadata: false, // 可选，不需要更新元数据就设为false
  });
  

• 将Uint8Array转换成Base64格式：

  // 先转成Blob，再用FileReader读取为Base64
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const reader = new FileReader();
  reader.onload = function() {
    const base64Pdf = reader.result.split(',')[1]; // 移除data URI前缀，仅保留Base64部分
    // 此处即可获取带所有注释的PDF的Base64字符串
    console.log(base64Pdf);
  };
  reader.readAsDataURL(blob);
  

注意事项 #

• 务必在PDF完全加载后执行代码，比如监听PDFViewerApplication.eventBus.on('documentloaded', ...)事件，避免因未加载完成拿不到pdfDocument实例。
• 若为跨域iframe嵌入，要保证主页面与iframe域名一致，或配置了正确的跨域权限，否则会触发访问限制。

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