如何在jsPDF的html方法中设置300DPI？

架构老林

2026-8-6

解决jsPDF生成300DPI适配打印的PDF问题

你的问题核心是把屏幕像素单位直接套用到了PDF的物理尺寸设置上，导致生成的PDF尺寸夸张，没法打印。下面直接给你可行的解决方案：

第一步：把Figma像素尺寸转换成300DPI对应的物理尺寸

Figma设计稿是2380×3368像素，按300DPI换算成打印用的物理尺寸：

宽度：2380 ÷ 300 ≈ 7.93英寸（或201.4毫米）
高度：3368 ÷ 300 ≈ 11.23英寸（或285.2毫米）

第二步：修正jsPDF初始化参数

放弃用px作为单位，改用**英寸（in）或毫米（mm）**这类物理单位，同时通过userUnit绑定300DPI的对应关系：

// 用英寸作为单位，直接匹配300DPI
const doc = new jsPDF({
  orientation: 'portrait',
  unit: 'in', // 物理单位：英寸
  userUnit: 300, // 1英寸 = 300像素，刚好对应300DPI
  format: [7.93, 11.23] // 上面换算出的物理尺寸（英寸）
});

如果习惯用毫米，参数改成这样：

const doc = new jsPDF({
  orientation: 'portrait',
  unit: 'mm',
  userUnit: 300 / 25.4, // 1毫米 = 300/25.4 ≈11.81像素，对应300DPI
  format: [201.4, 285.2] // 毫米单位的物理尺寸
});

第三步：确保HTML内容适配PDF尺寸

你的pageTemplate里的HTML内容必须和PDF的物理尺寸完全匹配，否则会出现缩放或裁剪问题，给HTML加个内联样式：

html, body {
  width: 7.93in; /* 和PDF宽度一致 */
  height: 11.23in; /* 和PDF高度一致 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

第四步：调整html转PDF的渲染参数

如果还是出现尺寸偏差，给doc.html加个scale参数，强制内容按300DPI渲染：

doc.html(pageTemplate.querySelector('html'), {
  callback: function(doc) {
    doc.save('pdf-template.pdf');
  },
  margin: [0,0,0,0],
  scale: 1.0 // 若内容偏大/偏小，微调这个值（比如0.95或1.05）
});