如何在HTML中通过jsPDF库在客户端生成PDF文件并触发保存-html教程-PHP中文网

jspdf 初始化生成空白页因默认创建空文档，需手动添加内容；转dom需html2canvas配合并设scale/usecors；中文需注册支持utf-8的字体；save()须在用户手势事件内调用以防拦截。

如何在html中通过jspdf库在客户端生成pdf文件并触发保存

jsPDF 初始化时为什么生成的 PDF 是空白页

常见现象是调用 new jsPDF() 后直接 save()，结果下载一个只有白纸、没内容的 PDF。这是因为 jsPDF 默认创建的是空文档，不自动渲染 DOM 或文本——你得手动添加内容。

最简可行路径是先加一段文字：

const doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save("hello.pdf");

注意坐标单位是毫米，默认原点在左上角，text() 的第二、三个参数是 x、y 位置，太小（如 y=5）可能被裁剪，建议 y ≥ 10。

把网页某块区域（比如 div）转成 PDF 却模糊或错位

直接用 html() 方法（jsPDF + html2canvas 组合）是最常用方式，但容易出问题：html2canvas 截图默认忽略 CSS transform、fixed 定位、跨域图片，且缩放比例不设好会糊。

关键配置项必须显式传入：

scale: 2 —— 提升截图分辨率，避免文字发虚
useCORS: true —— 加载同域/已配 CORS 的图片
logging: false —— 关闭控制台冗余日志
确保目标 div 有明确宽高，无 overflow: hidden 截断内容

示例：

html2canvas(document.getElementById("content")).then(canvas => {
  const imgData = canvas.toDataURL("image/png");
  const doc = new jsPDF("p", "mm", "a4");
  const imgWidth = 210; // A4 宽度 mm
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  doc.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
  doc.save("content.pdf");
});

中文显示为方块或乱码

jsPDF 原生不支持 UTF-8 中文，text() 直接写中文会变成方框。必须注册自定义字体（.ttf 文件），且该字体需包含中文字形。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

操作分三步：

用 jsPDF.setFont() 前，先用 doc.addFont() 加载字体（推荐思源黑体、Noto Sans SC 等开源可商用字体）
调用 doc.setFont("yourFontName", "normal") 切换字体族
确保字体文件通过 fetch() 或 import 正确加载，路径不能 404；否则静默失败，仍显示方块

片段示意：

const doc = new jsPDF();
const fontUrl = "/fonts/NotoSansSC-Regular.ttf";
fetch(fontUrl).then(res => res.arrayBuffer()).then(buf => {
  doc.addFont(buf, "NotoSansSC", "normal");
  doc.setFont("NotoSansSC");
  doc.text("你好世界", 20, 20); // 这行才真正生效
});