ASP.Net页面嵌入PDF表单：如何获取更新值并保存至SQL？

先梳理你之前代码的核心问题 #

• document.querySelectorAll()返回的是节点列表（NodeList），不是单个DOM元素，直接调用contentDocument或getJSAPI()必然报错，需通过索引[0]取单个元素
• 浏览器原生的iframe/embed PDF阅读器（如Chrome内置阅读器）没有公开的JavaScript API来直接读取表单字段，你尝试的exportAsObject()、getJSAPI()都是特定插件（如旧版Adobe Reader）的私有方法，现在已不被主流浏览器支持
• pdfjsLib未正确初始化，必须加载PDF文档后才能调用相关方法

可行解决方案：使用PDF.js处理可编辑PDF表单 #

PDF.js是Mozilla开源的PDF渲染库，支持读取和编辑PDF表单字段，兼容性好，是当前最可靠的方案。

步骤1：引入PDF.js库 #

下载PDF.js包（包含pdf.js和pdf.worker.js），放到项目的Scripts目录下，页面头部引入：

<script src="/Scripts/pdf.js"></script>
<script src="/Scripts/pdf.worker.js"></script>

步骤2：替换iframe/embed为PDF渲染容器 #

移除原有的iframe和embed，添加一个div作为PDF渲染容器：

<div id="pdfContainer" style="width:810px; height:500px; overflow:auto;"></div>
<asp:Button ID="submitBtn" runat="server" Text="保存数据" ClientIDMode="Static" />

步骤3：编写JavaScript代码加载PDF并获取表单值 #

// 配置PDF.js的Worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '/Scripts/pdf.worker.js';

// PDF文件路径（可从ASP.Net后台动态获取，比如绑定data-id的值）
const pdfId = document.querySelector('[data-id="123456789"]').dataset.id;
const pdfUrl = `/GetPdf.aspx?id=${pdfId}`; // 假设GetPdf.aspx负责返回PDF文件
let pdfDocInstance = null;

// 加载并渲染PDF
pdfjsLib.getDocument(pdfUrl).promise
  .then(doc => {
    pdfDocInstance = doc;
    // 渲染第一页（多页可循环处理）
    return doc.getPage(1);
  })
  .then(page => {
    const scale = 1.2;
    const viewport = page.getViewport({ scale });
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    document.getElementById('pdfContainer').appendChild(canvas);
    
    // 渲染页面到canvas
    return page.render({ canvasContext: ctx, viewport }).promise;
  })
  .catch(err => console.error('PDF加载失败:', err));

// 点击保存按钮时收集表单值并提交到后台
document.getElementById('submitBtn').addEventListener('click', () => {
  if (!pdfDocInstance) return alert('PDF未加载完成');
  
  pdfDocInstance.getFieldObjects().then(fieldObjects => {
    const formData = {};
    // 遍历所有表单字段，收集值
    Object.keys(fieldObjects).forEach(fieldName => {
      formData[fieldName] = fieldObjects[fieldName].value;
    });
    
    // 发送数据到ASP.Net后台
    fetch('/SavePdfFormData.aspx', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(result => {
      result.success ? alert('数据保存成功') : alert('保存失败，请重试');
    })
    .catch(err => console.error('提交失败:', err));
  });
});

步骤4：ASP.Net后台处理保存到SQL数据库 #

创建SavePdfFormData.aspx页面，后台代码示例：

using System;
using System.Data.SqlClient;
using System.Web.Script.Serialization;

public partial class SavePdfFormData : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.HttpMethod != "POST") return;
        
        // 解析前端传来的JSON数据
        var serializer = new JavaScriptSerializer();
        var formData = serializer.Deserialize<dynamic>(Request.InputStream);
        
        // 连接SQL数据库（替换为你的连接字符串）
        string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["YourDbConn"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            conn.Open();
            // 示例：插入数据到数据库，根据你的表结构调整SQL语句
            string sql = "INSERT INTO PdfFormRecords (FieldA, FieldB, FieldC) VALUES (@FieldA, @FieldB, @FieldC)";
            using (SqlCommand cmd = new SqlCommand(sql, conn))
            {
                cmd.Parameters.AddWithValue("@FieldA", formData.FieldA ?? DBNull.Value);
                cmd.Parameters.AddWithValue("@FieldB", formData.FieldB ?? DBNull.Value);
                cmd.Parameters.AddWithValue("@FieldC", formData.FieldC ?? DBNull.Value);
                cmd.ExecuteNonQuery();
            }
        }
        
        // 返回结果给前端
        Response.ContentType = "application/json";
        Response.Write("{\"success\": true}");
        Response.End();
    }
}

关键注意事项 #

• 确保你使用的PDF是带可编辑表单字段的PDF（不是普通只读PDF）
• 若PDF文件来自跨域地址，需配置CORS允许访问
• 母版页中使用服务器端控件时，建议设置ClientIDMode="Static"避免ID被自动修改
• PDF.js版本建议使用稳定版，避免兼容性问题

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