React项目中jsPDF生成PDF出现大量空白页问题求助

问题背景 #

在React项目中使用jsPDF导出HTML内容到PDF时，HTML组件渲染正常，但生成的PDF在内容后出现大量空白页——原本仅占A2纸张约一半的内容，却生成了7页PDF。

核心原因分析 #

1. windowWidth设置过小：当前配置的windowWidth:100远小于A2纸张的实际宽度（纵向A2为1190pt），导致内容被强制压缩换行，撑出大量额外页面。
2. 容器宽度超出纸张：外层容器width:109.5%会让内容超出纸张边界，触发不必要的分页。
3. 响应式表格干扰：Bootstrap的responsive表格类会生成横向滚动容器，在PDF渲染流程中可能产生异常高度，引发多余空白页。

具体修复方案 #

1. 匹配windowWidth与纸张实际宽度 #

修改jsPDF的html配置，将windowWidth设置为接近A2纸张宽度的值（预留左右边距）：

import jsPDF from 'jspdf';

export const pdf = ({ 
    filename
}) => {
    const doc = new jsPDF({orientation:'p', unit :'pt', format: 'a2', precision: 1});

    doc.html(document.getElementById("presupuesto"), {
        callback: function (doc) {
            doc.save(filename);
        },
        x: 10,
        y: 10,
        windowWidth: 1170 // 匹配A2纸宽度，减去20pt左右边距
     }); 
}

2. 修正容器宽度，避免内容溢出 #

将外层容器的width从109.5%改为100%，确保内容在纸张范围内：

<div id="presupuesto" style={{width: "100%"}}>
  <!-- 内部HTML内容保持不变 -->
</div>

3. 移除响应式表格类 #

去掉Bootstrap表格的responsive类，避免渲染时产生异常布局：

<!-- 移除responsive类 -->
<Table striped bordered hover>
<thead>
  <tr>
    <th>Cantidad</th>
    <th style={{ width: "60%"}}>Descripción</th>
    <th>Subtotal efectivo</th>
    <th>Total efectivo</th>
  </tr>
</thead>
<!-- 表格其余内容不变 -->
</Table>

<!-- 第二个表格同样移除responsive类 -->
<Table striped bordered hover>
<thead>
  <tr>
    <th>Importe Neto Gravado</th>
    <th>IVA 21%</th>
    <th>Total de la operación</th>
  </tr>
</thead>
<!-- 表格其余内容不变 -->
</Table>

4. 可选：优化自动分页规则（若仍有问题） #

如果上述修改后仍存在空白页，可以启用jsPDF的自动分页优化：

doc.html(document.getElementById("presupuesto"), {
    callback: function (doc) {
        doc.save(filename);
    },
    x: 10,
    y: 10,
    windowWidth: 1170,
    autoPaging: 'text' // 基于文本内容智能分页
 }); 

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