jsPDF生成PDF格式异常 如何配置生成A4宽度自适应PDF文件

jsPDF的html()方法默认不会自动将DOM内容缩放至PDF页面宽度，会按DOM原始渲染尺寸输出，未配置适配参数时就会出现内容排版错乱、宽度不符合A4规范的问题。

效果参考 #

• 浏览器端原始内容效果：
  
• 未做适配生成的PDF效果：
  
• 问题代码：

const doc = new jsPDF();
doc.html(document.getElementById('print-content')!, {
  callback: function (doc) {
    doc.save(activeSales?.ID + '.pdf');
  },
});

适配实现 #

通过html()方法内置的宽度、边距、分页配置，即可实现内容自动适配A4宽度，无需额外引入其他依赖：

// 初始化PDF实例时明确指定A4规格、纵向布局，单位用pt（印刷标准单位）
const doc = new jsPDF({
  orientation: 'portrait',
  unit: 'pt',
  format: 'a4'
});

const printNode = document.getElementById('print-content');
// 获取A4页面实际宽度，预留40pt的上下左右边距，可根据需求调整数值
const pageWidth = doc.internal.pageSize.getWidth();
const pageMargin = 40;
const contentWidth = pageWidth - pageMargin * 2;

doc.html(printNode, {
  callback: (doc) => {
    doc.save(`${activeSales?.ID}.pdf`);
  },
  // 核心适配参数
  width: contentWidth, // 指定内容渲染后的目标宽度，严格匹配A4可用宽度
  windowWidth: printNode.scrollWidth, // 匹配DOM实际滚动宽度，保证内部依赖的html2canvas完整捕获所有内容
  margin: [pageMargin, pageMargin, pageMargin, pageMargin], // 设置统一页面边距，避免内容贴到PDF边缘
  autoPaging: 'text', // 开启智能分页，避免文本、图片被分页线硬截断
  x: pageMargin,
  y: pageMargin
});

优化提示 #

如果渲染后仍有少量样式错位，可以配合以下调整：

• 不要给待打印的容器设置固定像素宽度，尽量使用width: 100%的流式布局
• 若打印样式和页面正常展示样式冲突，可以在调用html()方法前临时给容器添加打印专用样式类，PDF生成回调里再移除该类，不影响页面正常展示
• 内容包含跨域图片时，需要提前给图片设置crossorigin="anonymous"属性，避免图片加载失败导致排版偏移

内容的提问来源于stack exchange，提问作者Alvin Stefanus