点击下载证书时浏览器直接打开pdf而非保存是因content-disposition响应头缺失或前端未用download属性；纯前端需jspdf+html2canvas生成，注意跨域图片、中文乱码（须嵌入noto sans cjk字体）及微信拦截（需降级提示）。
点击下载证书时浏览器直接打开 PDF 而不是弹出保存框
这是最常见的“假下载”问题：链接指向 PDF 文件，但浏览器自动内嵌预览，用户根本没拿到文件。本质是服务端没正确设置 Content-Disposition 响应头，或前端用 <a href></a> 直链 PDF 时缺少强制下载提示。
- 纯前端方案（无后端）只能靠
<a download="certificate.pdf"></a>，但仅对同源 PDF 有效；跨域或 Blob URL 才真正可靠 - 如果 PDF 来自后端接口（如
/api/cert?id=123），必须让该接口返回Content-Disposition: attachment; filename="cert-123.pdf" - 不要用
window.open(url)或location.href = url触发下载——它们等同于普通跳转，无法触发下载行为
用 JavaScript 动态生成证书 PDF 并触发下载（无需后端）
适合学习平台前端生成简单证书（含学员名、日期、Logo），不依赖服务器渲染。核心是用 jsPDF + html2canvas 把证书 DOM 截图并转 PDF。
- 先用
html2canvas截取证书容器（如div#cert-container），注意设置scale: 2避免模糊 - 再用
jsPDF的addImage插入截图，调用save("certificate.pdf")触发下载 - 关键坑：
html2canvas对跨域图片（如 CDN 上的 Logo）会失败，需提前设置img.crossOrigin = "anonymous"且服务端配 CORS 头 - 移动端 Safari 不支持
save()，得降级为output("datauristring")+a.href = dataUrl+a.click()
证书 PDF 中文乱码（方块字 / 空白）
jsPDF 默认不支持中文，直接 doc.text("张三", x, y) 会输出乱码。必须显式注册字体并使用 setFont。
- 用
jsPDF官方推荐的pdfmake或jspdf-autotable更省事，但若坚持用原生jsPDF，需先加载支持 Unicode 的字体（如 Noto Sans CJK） - 字体文件要转成 base64 字符串，用
doc.addFileToVFS("NotoSansCJKsc-Regular.ttf", fontBase64)注册 - 再调用
doc.addFont("NotoSansCJKsc-Regular.ttf", "NotoSans", "normal")，最后doc.setFont("NotoSans") - 别漏掉
doc.setFontSize(14)，否则文字可能小到看不见
证书下载链接被微信 / QQ 内置浏览器拦截
微信 Android 版对 download 属性和 Blob 下载有严格限制，点链接常静默失败，控制台报 Not allowed to navigate top frame to data URL。
- 优先检测 UA：
navigator.userAgent.includes("MicroMessenger")，是则改用提示语“请在浏览器中打开后下载” - 避免用
data:URL 或 Blob URL 直接赋给a.href，微信会拦截；换成后端生成带签名的临时 PDF 链接（如/cert/temp/abc123.pdf），有效期 5 分钟 - 按钮文案别写“立即下载”，写“获取证书”更不容易被误判为诱导下载
最麻烦的其实是字体嵌入和微信兼容性——这两处卡住，90% 的人就停在这儿了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
