HTML无法自动命名PDF，浏览器打印时文件名由决定但不可控；JS截图方案（html2canvas+jsPDF）可自定义名称但质量差；服务端生成才是可靠方案，支持真自动命名与语义化PDF。
HTML 本身不能自动把网页转成 PDF，更不会“自动命名”——这是浏览器或后端工具的行为，不是 HTML 的能力。
浏览器打印功能导出 PDF 时如何控制文件名
用户点击「打印 → 保存为 PDF」时，浏览器默认用
- Chrome / Edge：显示
- Safari：有时用 URL 路径最后一段，
- Firefox：基本遵循
所以，想让导出的 PDF 名字靠谱，唯一可控方式是提前写好规范的
2024_Q3_销售报表_v2
注意：别指望 document.title = "xxx" 在打印弹窗已打开后再改——此时无效。
立即学习“前端免费学习笔记（深入）”；
前端 JS 调用 html2canvas + jsPDF 实现“自动命名”导出
这不是真·自动生成 PDF，而是用 JS 截图 HTML 元素再拼成 PDF。文件名可由 JS 完全控制，但质量受限于截图（不支持分页、CSS @media print 失效、字体/跨域图片易出错）。
- 适合简单单页、无复杂布局、无 iframe 或跨域资源的场景
- 导出的 PDF 实质是多张 PNG 拼接，文本不可选、搜索、缩放易模糊
- 文件名通过
pdf.save("report_20241005.pdf")设置，时间戳需手动拼接
最小可行示例（需引入 html2canvas 和 jspdf）：
html2canvas(document.body).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
const width = pdf.internal.pageSize.getWidth();
const height = (canvas.height * width) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, width, height);
pdf.save('日报_20241005.pdf'); // ← 这里决定文件名
});服务端生成才是真·自动命名 + 稳定 PDF
真正可靠的方式是把 HTML 发给后端，用专业库（如 Python 的 weasyprint、Node 的 puppeteer、Java 的 Flying Saucer）渲染并下载。文件名由后端拼接，比如按用户 ID + 时间戳 + 业务标识生成：
-
puppeteer可精确控制输出名：await page.pdf({ path: `/tmp/invoice_${userId}_${Date.now()}.pdf` }) -
weasyprint支持完整 CSS Paged Media，能分页、页眉页脚、目录，且输出是矢量 PDF - 关键点：前端只需发个请求，后端返回
Content-Disposition: attachment; filename="xxx.pdf"
前端触发示例（无需插件）：
fetch('/api/export-pdf', {
method: 'POST',
body: JSON.stringify({ reportId: 123 })
}).then(res => {
if (res.ok) return res.blob();
}).then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '订单详情_202410051423.pdf'; // ← 前端可读取后端返回的 filename 字段动态设
a.click();
});真正要“自动命名”，就得放弃纯前端幻想；而所谓“便捷”，其实是权衡——截图快但糙，服务端慢点但稳。最容易被忽略的是：PDF 的语义结构（标题层级、书签、可访问性）在截图方案里彻底丢失，业务系统若需归档或 OCR，这点必须提前踩坑。
