如何在HTML中嵌入fillable PDF表单并将填写完成的PDF上传至后端

直接使用<embed>标签调用浏览器默认PDF阅读器时，出于沙箱安全限制，JavaScript无法直接跨上下文访问阅读器内修改后的PDF二进制内容，所以你原来的实现思路行不通，推荐使用开源的PDF.js库实现可控的可填写PDF渲染与内容提取。

步骤1：引入PDF.js依赖 #

你可以将PDF.js的所有库文件下载到本地自行部署，不需要依赖外部服务，引入代码如下（路径替换为你自己的部署路径）：

<script src="path/to/pdf.min.js"></script>
<script src="path/to/pdf_viewer.min.js"></script>
<link rel="stylesheet" href="path/to/pdf_viewer.min.css">

步骤2：替换原有嵌入标签 #

删掉原来的<embed>代码，替换为PDF渲染容器和上传按钮：

<div id="pdfViewerContainer" style="width: 100%; height: 80vh;"></div>
<button id="uploadPdfBtn">提交填写完成的PDF</button>

步骤3：初始化渲染可填写PDF #

// 配置PDF.js的工作线程路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.min.js';

const container = document.getElementById('pdfViewerContainer');
const pdfUrl = 'link-to-pdf.com'; // 替换为你的原PDF地址

// 初始化支持表单填写的PDF渲染
const loadingTask = pdfjsLib.getDocument(pdfUrl);
loadingTask.promise.then(pdf => {
  const viewer = new pdfjsViewer.PDFViewer({
    container: container,
    enableScripting: true, // 开启PDF内置脚本支持
    renderInteractiveForms: true // 开启表单可填写能力
  });
  viewer.setDocument(pdf);
  // 保存viewer实例供后续导出使用
  window.pdfViewerInstance = viewer;
});

步骤4：实现修改后PDF的导出与上传 #

给上传按钮绑定点击事件，获取用户填写完成的PDF数据上传到后端：

document.getElementById('uploadPdfBtn').addEventListener('click', async () => {
  const viewer = window.pdfViewerInstance;
  if (!viewer) return;
  
  // 提取填写完成的PDF二进制数据
  const pdfDoc = viewer.pdfDocument;
  const filledPdfData = await pdfDoc.saveDocument(); // 返回Uint8Array格式的PDF二进制内容
  
  // 组装FormData上传到后端接口
  const formData = new FormData();
  formData.append('filled_pdf', new Blob([filledPdfData], {type: 'application/pdf'}), 'filled_form.pdf');
  
  fetch('/your-backend-upload-api', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
    .then(data => {
      // 自定义上传成功逻辑
      alert('PDF上传成功');
    }).catch(err => {
      // 自定义上传失败逻辑
      console.error('上传失败', err);
    });
});

• 所有PDF.js相关文件需要部署到你自己的服务域名下，同时要给PDF资源的响应头配置CORS规则，避免跨域加载失败
• 绝大多数第三方标准化可填写PDF都可以被PDF.js完美兼容，无需修改原PDF文件，完全符合你的需求
• 如果你不想自行部署PDF.js，也可使用Adobe官方的PDF Embed API实现相同能力，该API也支持导出填写后的PDF内容，但需要注册开发者账号获取密钥，依赖Adobe的外部服务

内容的提问来源于stack exchange，提问作者Simon Rieß