HTML中如何实现表单提交时动态生成PDF合同-html教程-PHP中文网

表单提交后需用 javascript 拦截并 fetch 发送数据至后端，由 puppeteer（node.js）、weasyprint（python）或 itext（java）等服务端方案生成合规 pdf；前端禁用 jspdf 等客户端库，须确保字体嵌入、页眉页脚、签字区留白及 content-disposition 文件名控制。

html中如何实现表单提交时动态生成pdf合同

表单提交后直接生成PDF，浏览器不跳转也不刷新

不能靠 form 默认提交（会整页刷新），必须用 JavaScript 拦截提交行为，用 fetch 或 axios 发送数据到后端，再由后端生成 PDF 并返回二进制流或 URL。

常见错误是前端试图用纯 JS 库（如 jsPDF）拼合同内容——它不支持复杂排版、中文换行、页眉页脚、数字签名等合同必备能力，生成的 PDF 很容易被质疑法律效力。

表单用 event.preventDefault() 阻止默认提交
收集字段时注意 input[type="checkbox"] 和 select[multiple] 的值需特殊处理
后端接口应返回 Content-Type: application/pdf，前端用 response.blob() 接收
避免把 PDF 直接 base64 嵌入页面，大文件易触发内存警告

后端生成合同 PDF 的可靠方案选型

Node.js 用 puppeteer 渲染 HTML 模板最稳妥；Python 推荐 weasyprint（对 CSS 支持好）或 pdfkit（轻量但中文需手动加载字体）；Java 项目常用 iText，但模板维护成本高。

关键不是“能不能生成”，而是“生成的 PDF 是否能通过法务审核”：必须确保页码连续、签字区域留白、公章位置精确、中文字体嵌入（推荐 Noto Sans CJK）、禁止复制/编辑权限可设。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

puppeteer 启动 Chromium 实例较重，生产环境要加 --no-sandbox 和进程池控制并发
HTML 模板里不要用 position: fixed 做页眉页脚，weasyprint 不支持，改用 @page 规则
所有字体文件必须绝对路径或 base64 内联，否则生成的 PDF 会出现方块字

如何让用户下载 PDF 且保留原始文件名

浏览器默认下载时文件名来自响应头 Content-Disposition，不是 URL 路径。后端必须设置：Content-Disposition: attachment; filename="XX公司服务合同_20240517.pdf"。

如果后端无法控制响应头（如用了 CDN 中转或 Serverless 函数），前端可用 URL.createObjectURL() 创建临时链接，并手动设置 a.download 属性：

const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `服务合同_${new Date().toISOString().slice(0,10)}.pdf`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);