Search code examples
javascriptjspdf

jsPDF multipage pdf - text overlapping


<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',  // This line is needed to ensure smooth text flow across pages but it causes text overlapping vertically.

});
</script>

There is a line in above code that cause text overlapping. How to solve this text overlapping problem?


Solution

  • doc.html(document.querySelector('#my-div'), {
        callback: function (doc) {
            doc.save('file.pdf');
        },
        margin: [41, 41, 41, 41],
        x: 33,
        y: 33,
        html2canvas: {
            scale: 0.6,
            width: 1000
        },
        autoPaging: 'text',  // This line is needed to ensure smooth text flow across pages but it causes text overlapping vertically.
    
    });
    

    This code shows content of my-div properly in generated pdf file.