React项目中使用jsPDF导出PDF时如何将HTML表格适配A4页面？

我在HTML中创建了表格，使用jsPDF导出为PDF时，表格超出了A4页面尺寸。以下是我的React实现代码、HTML页面视图和导出后的PDF视图，求解决办法让表格适配A4页面。

我的React代码 #

export default function OfferPDF({offer, paramsId}) {
    
    const generatePDF = () => {
        const pdfSize = 'a4';
        const doc = new jsPDF('p', 'pt', pdfSize);
        doc.setFont('Ubuntu', 'normal');
        doc.html(document.getElementById('pdf-content'), {
            callback: function (pdf) {
                pdf.save(`${offer.offers_year}/${offer.offers_no}.pdf`);
            }
        });
    }
    

    return (
        <div id="pdf-content">

            <table className="table table-bordered">
                <tbody>
                <tr>
                    <td>Müşteri</td>
                    <td>{offer.trade_name}</td>
                    <td>Bilgi</td>
                    <td>{offer.information}</td>
                </tr>
                ...
                </tbody>
            </table>
            <button onClick={generatePDF}>Pdf</button>
        </div>
    );
}

HTML页面视图 #

导出后的PDF视图 #

解决方案 #

方案1：配置jsPDF的html参数设置适配宽度 #

在doc.html的配置中添加width和windowWidth参数，直接指定PDF内的内容宽度为A4页面的可用宽度（A4纵向pt单位总宽度为595.28，减去左右边距后设为515pt左右）：

const generatePDF = () => {
    const pdfSize = 'a4';
    const doc = new jsPDF('p', 'pt', pdfSize);
    doc.setFont('Ubuntu', 'normal');
    doc.html(document.getElementById('pdf-content'), {
        callback: function (pdf) {
            pdf.save(`${offer.offers_year}/${offer.offers_no}.pdf`);
        },
        width: 515, // 适配A4页面的可用宽度
        windowWidth: document.getElementById('pdf-content').offsetWidth // 匹配原内容宽度辅助缩放
    });
}

方案2：添加PDF专属CSS样式强制适配 #

给表格添加专属样式，让表格自动换行、缩小字体并固定布局：

/* 可放在组件style标签或全局CSS中 */
#pdf-content .table {
    width: 100% !important;
    table-layout: fixed; /* 固定表格布局，避免列宽溢出 */
}
#pdf-content .table td {
    word-wrap: break-word;
    overflow-wrap: break-word; /* 长文本自动换行 */
    font-size: 10pt; /* 适当缩小字体减少宽度占用 */
    padding: 4pt; /* 调整内边距节省空间 */
}

方案3：计算缩放比例适配页面 #

通过获取页面宽度和内容宽度，计算出缩放比例，让内容整体缩放到A4页面内：

const generatePDF = () => {
    const pdfSize = 'a4';
    const doc = new jsPDF('p', 'pt', pdfSize);
    const pageWidth = doc.internal.pageSize.getWidth();
    const contentElement = document.getElementById('pdf-content');
    const contentWidth = contentElement.offsetWidth;
    const scale = pageWidth / contentWidth; // 计算适配页面的缩放比例

    doc.setFont('Ubuntu', 'normal');
    doc.html(contentElement, {
        callback: function (pdf) {
            pdf.save(`${offer.offers_year}/${offer.offers_no}.pdf`);
        },
        autoPaging: 'text', // 开启自动分页，避免内容被截断
        scale: scale // 应用缩放比例
    });
}

内容的提问来源于stack exchange，提问作者Ubeydullah Yılmaz