如何通过JavaScript下载/保存HTML中嵌入的已编辑PDF并提交至API端点

阿华AIGC实验室

2026-4-27

如何实现编辑后PDF表单内容提交到指定API

嘿，这个需求是可以实现的，但直接用你当前的<object>标签嵌入PDF会碰到浏览器安全限制的难题——毕竟浏览器内置的PDF阅读器有沙箱隔离机制，JavaScript没法直接访问或导出用户编辑后的表单数据。下面给你两种可行的方案，优先推荐第一种：

方案一：用开源PDF渲染库完全控制（最可靠）

想要彻底掌控PDF的表单交互和数据导出，最好用像PDF.js这样的前端PDF库来渲染处理带表单的PDF：

引入PDF.js资源
先在页面里引入PDF.js的核心文件和工作线程文件（用本地资源即可）：
```
<script src="/path/to/pdf.js"></script>
<script src="/path/to/pdf.worker.js"></script>
```
渲染PDF并处理表单
用PDF.js把PDF渲染到页面的canvas上，同时解析PDF里的表单字段，生成对应的可编辑元素（如果需要更完整的表单支持，可以搭配PDF.js的viewer组件）。当用户点击「提交」按钮时：
- 收集所有表单字段的输入值
- 把这些值回填到PDF文档中
- 将修改后的PDF导出为Blob对象

发送Blob到你的API
用Fetch API把Blob打包成FormData发送到指定端点，示例代码如下：

document.getElementById('submit-btn').addEventListener('click', async () => {
  // 这里假设你已经通过PDF.js拿到了修改后的PDF Blob
  const editedPdfBlob = await getModifiedPdfBlob();
  
  const formData = new FormData();
  formData.append('filled_pdf', editedPdfBlob, 'completed-form.pdf');
  
  try {
    const response = await fetch('https://your-api-endpoint.com/submit', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      alert('表单提交成功啦！');
    } else {
      alert('提交失败，请稍后重试');
    }
  } catch (err) {
    console.error('提交过程出错:', err);
    alert('网络连接异常，请检查后重试');
  }
});