表单提交后需用 JavaScript 拦截并 fetch 发送数据至后端，由 Puppeteer（Node.js）、WeasyPrint（Python）或 iText（Java）等服务端方案生成合规 PDF；前端禁用 jsPDF 等客户端库，须确保字体嵌入、页眉页脚、签字区留白及 Content-Disposition 文件名控制。
表单提交后直接生成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）、禁止复制/编辑权限可设。
立即学习“前端免费学习笔记（深入）”；
-
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);
-
a.download在跨域响应下会被忽略，此时必须依赖后端设置Content-Disposition - 移动端 Safari 对
createObjectURL支持不稳定，大文件可能静默失败，建议降级为跳转新 tab 打开 PDF 链接 - 文件名含中文时，后端要用
filename*=UTF-8''xxx.pdf编码，否则 IE 和旧版 Edge 会乱码
合同关键字段动态注入的安全边界
用户输入的内容（如甲方名称、金额、日期）必须在服务端渲染前做严格过滤：HTML 标签要转义，CSS 表达式要剥离，<script> 和 javascript: 协议必须拦截。不能把用户输入直接 innerHTML 到模板里再给 Puppeteer 渲染。
更安全的做法是用模板引擎（如 Handlebars、Jinja2）的「自动转义」模式，或用 DOMPurify 对 HTML 片段净化后再插入。
- 金额字段别只校验前端
type="number"，后端要按正则^\d+(\.\d{1,2})?$重验，防止小数位超长导致 PDF 排版错乱 - 日期字段建议统一用 ISO 格式（
2024-05-17）传给后端，避免new Date(input)在不同浏览器解析不一致 - 签字栏不能用图片占位，应预留空白 div + border，由法务确认打印后手写区域尺寸是否合规
210mm 和 8.27in 渲染结果可能差 0.3mm，影响骑缝章对齐。 
