jsPDF 初始化后PDF为空,因其不自动解析HTML或渲染DOM,必须手动调用text()、addImage()等方法写入内容;导出div需配合html2canvas并设scale:2、useCORS:true;中文需addFont加载ttf并setFont,且save()须在用户手势事件内触发。

jsPDF 本身不解析 HTML,直接 new jsPDF() 得到的是空白文档——必须手动添加内容,否则 save() 出来的 PDF 就是一张白纸。
new jsPDF() 后为什么 PDF 是空的
常见错误是初始化后没调用任何内容写入方法就直接 doc.save()。jsPDF 不会自动抓取页面 DOM 或渲染当前 HTML,它只提供绘图 API。
-
text()是最简验证方式:确保 y 坐标 ≥ 10(单位 mm),太小会被裁剪 - 坐标原点在左上角,A4 默认宽 210mm、高 297mm,超出范围的内容不可见
- 若用
autoTable(),需额外引入jspdf-autotable插件,否则报错doc.autoTable is not a function
导出指定 div 为 PDF 的关键配置
要转 DOM 元素(如 <div id="content">),必须搭配 html2canvas,且默认行为极易出错。
- 必须显式传
scale: 2,否则截图模糊;useCORS: true才能加载同域图片 - 目标元素不能有
overflow: hidden,否则截断内容;最好设固定width/height -
addImage()的宽高单位是 mm,需按 canvas 比例换算:imgHeight = (canvas.height * 210) / canvas.width
中文显示为方块的修复路径
jsPDF 原生字体(Helvetica 等)不含中文字形,text("你好") 必然变方框。
立即学习“前端免费学习笔记(深入)”;
- 必须用
addFont()加载 .ttf 文件(推荐 NotoSansSC-Regular.ttf),且 fetch 路径不能 404 - 加载后须调用
setFont("NotoSansSC", "normal")切换字体族,否则仍用默认字体 - 字体注册是异步操作,
text()要放在fetch().then()内部,不能写在外部同步执行
最容易被忽略的是:所有 save() 调用必须发生在用户手势事件(如 click、touchend)内,否则现代浏览器会静默拦截下载。不是逻辑问题,是安全策略硬限制。


















