浏览器端无法纯前端生成规范PDF，必须依赖后端；推荐表单提交至后端，用Puppeteer等工具结合HTML模板生成并返回PDF，需注意中文字体、CSS兼容性、编码统一及分页细节。
表单提交后直接生成PDF，浏览器端做不到
纯前端 JavaScript 无法在不借助服务端的情况下生成符合规范的 PDF 文件。jsPDF 等库能生成简单 PDF，但对中文、CSS 样式、分页、字体嵌入支持极弱，导出效果常与网页渲染严重不一致。真实项目中，99% 的可靠方案都依赖后端生成。
推荐做法：表单 POST 到后端，由服务端渲染 PDF 并返回
用户填写 <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 发送数据，再触发下载：
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 不会自动跟随，需手动处理。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
别踩这些坑
常见翻车点集中在字体、样式和编码：
-
utf-8编码必须全局一致：HTML 模板、后端字符串、PDF 工具配置三者都要声明 UTF-8，否则中文变方块或乱码 -
textarea换行符在 PDF 中可能丢失 —— 后端要将\n替换为<br>或 CSSwhite-space: pre-line - 使用
wkhtmltopdf时，--page-size A4 --margin-top 10等参数必须显式传入，否则默认尺寸极小 - Puppeteer 的
page.pdf()默认不等待字体加载完成，需配合waitForFunction或加延时
PDF 生成不是“套个库就完事”，真正稳定输出需要反复校验字体路径、CSS 断点、页面高度计算 —— 这些细节往往比逻辑本身更耗时。
