HTML网页中如何实现表单提交并生成PDF文件-html教程-PHP中文网

浏览器端无法纯前端生成规范pdf，必须依赖后端；推荐表单提交至后端，用puppeteer等工具结合html模板生成并返回pdf，需注意中文字体、css兼容性、编码统一及分页细节。

html网页中如何实现表单提交并生成pdf文件

表单提交后直接生成PDF，浏览器端做不到

纯前端 JavaScript 无法在不借助服务端的情况下生成符合规范的 PDF 文件。jsPDF 等库能生成简单 PDF，但对中文、CSS 样式、分页、字体嵌入支持极弱，导出效果常与网页渲染严重不一致。真实项目中，99% 的可靠方案都依赖后端生成。

推荐做法：表单 POST 到后端，由服务端渲染 PDF 并返回

用户填写 <form></form> 后提交，后端接收数据，用模板（如 Jinja2、EJS、Thymeleaf）或 HTML-to-PDF 工具（如 Puppeteer、WeasyPrint、wkhtmltopdf）生成 PDF，再以 Content-Type: application/pdf 响应。关键点：

表单 action 指向后端接口，例如 /generate-pdf
后端需接收全部字段，不能只靠 request.form —— 若含文件上传，必须设 enctype="multipart/form-data"
生成 PDF 的 HTML 模板里，避免使用 position: fixed 或 transform，Puppeteer / wkhtmltopdf 对这些支持不稳定
中文字体必须显式加载：Puppeteer 中用 addFont，WeasyPrint 中用 @font-face + 绝对路径或 base64

临时调试可用：前端调用后端 API，用 blob 下载 PDF

如果后端已提供 PDF 生成接口（如 POST /api/pdf），前端可拦截表单提交，用 fetch 发送数据，再触发下载：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

document.getElementById('myForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  const res = await fetch('/api/pdf', { method: 'POST', body: data });
  if (res.ok) {
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'form-result.pdf';
    a.click();
    URL.revokeObjectURL(url);
  }
});

注意：blob 方式无法处理跨域响应头缺失 Access-Control-Allow-Origin 的情况；若后端返回重定向（302），fetch 不会自动跟随，需手动处理。