如何使用Adobe Embed API无需打开查看器下载带注释的PDF

存在可直接落地的实现方案，全程不需要在页面加载、打开Adobe PDF查看器，就能触发带注释PDF的下载，核心实现逻辑如下：

• 前置依赖配置
  • 提前完成Adobe PDF Embed API、Adobe PDF Services API的凭证申请，在控制台配置好应用域名白名单、服务端IP白名单，避免鉴权拦截。
  • 不要把注释数据只存在前端查看器的运行内存中，用户在查看器内添加、修改注释时，实时将注释同步为标准XFDF格式存储到你自有服务端，这一步是脱离查看器导出的核心前提。
• 自定义下载按钮逻辑实现
  • 完全不需要初始化PDF查看器实例，也不用调用查看器自带的下载API（该API强依赖查看器渲染完成才能运行）。
  • 给你自定义的下载按钮绑定点击事件，点击时先从自有服务端拉取对应PDF文件的存储地址、匹配的XFDF注释数据，再通过服务端转发请求到Adobe的PDF处理接口，传入参数要求将注释全量合并到原始PDF中。
  • 接口返回合并完成的PDF二进制流后，前端直接构造Blob对象，通过临时生成a标签的方式触发浏览器原生下载，全程无PDF查看器加载、渲染的步骤。
• 常见问题规避
  • 如果注释包含手写签名、自定义图章、富文本备注这类特殊内容，请求时需要显式传入embedAnnotations: true参数，避免特殊注释丢失、错位。
  • 不要尝试在前端用第三方库离线合并注释，Adobe的注释格式包含私有校验规则，本地合并的文件大概率出现格式兼容问题。
  • Adobe服务接口的鉴权秘钥必须放在服务端做请求转发，禁止直接写在前端代码里，避免凭据泄露被盗用。

核心逻辑参考代码 #

// 自定义下载按钮点击事件
document.getElementById('your-custom-download-btn').addEventListener('click', async () => {
  // 从自有服务端获取目标文件ID、对应注释XFDF数据
  const { targetFileId, annotationXfdf } = await fetch('/your-server/api/get-pdf-meta').then(res => res.json())
  
  // 通过自有服务端代理请求Adobe接口，合并注释生成带标注的PDF，避免前端暴露鉴权秘钥
  const pdfBlob = await fetch('/your-server/api/proxy-adobe-merge', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      fileId: targetFileId,
      xfdf: annotationXfdf,
      embedAnnotations: true,
      flattenAnnotations: false // 如需导出后注释不可编辑，可将该值改为true
    })
  }).then(res => res.blob())

  // 触发浏览器原生下载
  const tempUrl = URL.createObjectURL(pdfBlob)
  const downloadEl = document.createElement('a')
  downloadEl.href = tempUrl
  downloadEl.download = '已添加注释的文档.pdf'
  downloadEl.click()
  URL.revokeObjectURL(tempUrl)
})

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