React-js中js-pdf生成PDF尺寸异常问题求助

核心问题分析 #

你遇到的PDF尺寸异常，主要是文档尺寸参数设置错误加上HTML转换时未指定适配规则导致的：

• 创建jsPDF实例时，你传入的尺寸[297,210]是横向A4的尺寸，但你设置的是纵向（'p'），这会让页面比例颠倒，内容被迫缩放适配错误的画布。
• doc.html()方法默认没有严格匹配页面宽度，导致内容被过度放大。

修复步骤 #

1. 修正PDF文档尺寸 #

纵向A4的标准尺寸是宽210mm、高297mm，直接使用预设的'a4'参数更不易出错：

function handleDownload() {
    // 用预设的a4纵向，替代手动写尺寸
    const doc = new jsPDF('p', 'mm', 'a4');
    const content = pdfRef.current;
    doc.html(content, {
      // 指定内容宽度适配页面宽度（210mm）
      width: 210,
      callback: function (doc) {
        doc.save('我的简历.pdf');
      }
    });
}

如果坚持手动指定尺寸，应该写成new jsPDF('p', 'mm', [210, 297])，和你的HTML元素尺寸对应。

2. 确保HTML元素样式严谨 #

给导出元素加上box-sizing: border-box，避免padding/margin导致实际尺寸超出210mm：

<main 
  id="classic" 
  ref={pdfRef} 
  className='mx-auto bg-white shadow w-[210mm] h-[297mm] box-border'
>
  <button onClick={handleDownload} className="bg-mainBlack text-white px-4 py-2 text-xs">download</button>
  {/* Rest inner elements */}
</main>

3. 可选：调整转换缩放比例 #

如果还是有适配问题，可以在doc.html()的配置里添加scale参数，精细控制缩放：

doc.html(content, {
  width: 210,
  scale: 0.95, // 根据实际情况微调
  callback: function (doc) {
    doc.save('我的简历.pdf');
  }
});

效果验证 #

修正后，PDF的尺寸会和你浏览器中渲染的210x297mm元素完全匹配，内容不会被过度放大或偏移。

内容的提问来源于stack exchange，提问作者Zohaib Khan