如何在HTML的JavaScript中导入PDF并提取可填写字段值至input标签

嘿，我来帮你一步步搞定这个需求！其实这个问题可以拆成在HTML页面中嵌入显示PDF和提取PDF已填写的表单数据到input标签两个核心任务，咱们逐个突破：

一、先把PDF嵌入HTML页面显示 #

这里有两种常用方式，选哪种看你的需求：

1. 原生HTML标签快速实现（简单但功能有限） #

如果只是想快速展示PDF，用<embed>或者<iframe>就够了，代码直接抄：

<!-- 用embed标签，支持大多数浏览器 -->
<embed src="your-filled-form.pdf" type="application/pdf" width="100%" height="600px">

<!-- 或者用iframe，兼容性更稳定 -->
<iframe src="your-filled-form.pdf" width="100%" height="600px" frameborder="0"></iframe>

⚠️ 注意：这种方法只能看PDF，没法直接提取表单数据，适合只需要展示的场景。如果要提取数据，得用下面的JS库方案。

2. 用PDF.js实现更灵活的展示（推荐，支持后续数据提取） #

PDF.js是Mozilla开源的JS库，既能渲染PDF，还能读取表单数据。你可以下载它的本地文件，或者用CDN引入（直接在HTML里加脚本就行）：

<!-- 引入PDF.js核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<!-- 页面里加一个容器放PDF -->
<div id="pdf-container" style="width: 100%; height: 600px;"></div>

然后用JS渲染PDF：

// 指定PDF worker的路径（和核心库版本对应）
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

// 加载并渲染PDF
const pdfUrl = 'your-filled-form.pdf';
const container = document.getElementById('pdf-container');

pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  // 渲染第一页（如果是多页PDF，循环渲染即可）
  return pdf.getPage(1);
}).then(page => {
  const viewport = page.getViewport({ scale: 1.5 });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  container.appendChild(canvas);
  
  // 渲染PDF到canvas
  page.render({
    canvasContext: context,
    viewport: viewport
  });
});

二、提取PDF已填写的表单数据到HTML input #

这部分是核心，同样用PDF.js来做，步骤如下：

1. 先准备好HTML的表单结构 #

确保每个input的name属性和PDF里的表单字段名完全对应（比如PDF里的姓名字段叫name，HTML input的name就设成name）：

<form id="user-form">
  <div>
    <label>姓名：</label>
    <input type="text" name="name" id="name">
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" name="email" id="email">
  </div>
  <div>
    <label>手机号：</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <!-- 其他字段根据你的PDF表单添加 -->
</form>

2. 用PDF.js读取表单数据并填充 #

在之前的PDF渲染代码基础上，添加提取字段的逻辑：

pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  // 获取PDF的所有表单字段（不需要逐页取，直接用getField方法）
  return pdf.getFieldObjects();
}).then(fieldObjects => {
  // 遍历所有PDF字段
  Object.keys(fieldObjects).forEach(fieldName => {
    const field = fieldObjects[fieldName];
    // 找到对应name的HTML input
    const input = document.querySelector(`input[name="${fieldName}"]`);
    if (input && field.value) {
      // 把PDF里的填充值赋值给input
      input.value = field.value;
    }
  });
}).catch(err => {
  console.error('读取PDF表单数据出错：', err);
});

关键注意事项 #

• 你的PDF必须是可编辑的表单PDF：如果是扫描件（图片格式的PDF），上面的方法完全没用，得用OCR工具（比如Tesseract.js）先识别文字，再匹配字段，这个复杂度会高很多。
• 字段名要严格对应：PDF里的字段名可以用Adobe Acrobat或者其他PDF编辑工具查看，确保和HTML input的name一致。
• 跨域问题：如果PDF放在其他域名下，需要服务器配置CORS允许访问，否则浏览器会拦截请求，建议把PDF和HTML放在同一个服务器下。
• PDF版本兼容性：有些老PDF的表单格式可能不被PDF.js完全支持，尽量用标准的AcroForm格式的PDF。

要是你在具体实现中遇到字段匹配、渲染异常或者跨域的问题，随时再细化提问！

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