使用jsPDF生成多页PDF时文本重叠问题的解决方法

原问题代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
var doc = new jspdf.jsPDF({
    orientation: 'p',
    unit: 'pt',
    format: 'a4'
});

doc.html(document.querySelector('#my-div'), {
    callback: function (doc) {
        doc.save('file.pdf');
    },
    margin: [30, 30, 30, 30],
    x: 32,
    y: 32,
    html2canvas: {
        scale: 0.6,
        width: 1000
    },
    autoPaging: 'text'  // 该参数确保文本跨页流畅，但会引发垂直文本重叠
});
</script>

问题说明 #

上述代码中，autoPaging: 'text'参数虽能实现文本跨页的流畅排版，但会导致生成的PDF出现垂直方向的文本重叠问题，以下是几种可行的解决方法：

解决方法 #

• 调整html2canvas缩放比例：将html2canvas.scale设为1或更高的整数（比如2），低缩放比例会导致jsPDF的排版计算出现偏差，进而引发重叠。同时可以移除html2canvas.width参数，让它自适应内容宽度。
• 移除手动定位的x/y参数：手动设置x、y值会和autoPaging: 'text'的自动排版逻辑冲突，去掉这两个参数，让jsPDF基于margin自动定位内容。
• 调整边距值：适当增大上下边距（比如把margin设为[40, 30, 40, 30]），给内容留出足够的排版空间，避免挤在一起。
• 切换autoPaging模式：如果上述方法无效，可以尝试将autoPaging设为'legacy'，虽然排版流畅度有所下降，但能避免文本重叠问题，之后再结合其他参数微调。

修改后的示例代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
var doc = new jspdf.jsPDF({
    orientation: 'p',
    unit: 'pt',
    format: 'a4'
});

doc.html(document.querySelector('#my-div'), {
    callback: function (doc) {
        doc.save('file.pdf');
    },
    margin: [40, 30, 40, 30],
    html2canvas: {
        scale: 1  // 使用整数比例，避免计算偏差
    },
    autoPaging: 'text'
});
</script>

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