Text overlaping with JSPDF 2.0.0 and customize font

Viewed 340

I'm using JSPDF Version 1.5.3 and HTML2CANVAS for creating a pdf from a html page. I obtain issues of text overlaping. For instance:

enter image description here

I declarer correctly the meta data type in my html page. Here my function for generating the pdf:

    function generatePDF() {                
        var fileName = 'test.pdf';
        
        /*OLD FUNCTION USED BUT GENERATE ZOOM BROWSER AND BIG MARGIN ISSUES
        html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
            var imgData = canvas.toDataURL("image/jpeg");
            var pdf = new jsPDF('p', 'mm', [520, 1080]);
            pdf.addImage(imgData, 'JPEG', 10, 10);
            
            pdf.save(fileName);
        }); 
        */
        
        /* TAKE IN ACCOUNT THE BROWSER ZOOM AND SOLVE MARGIN ISSUES */              
        let pdf = new jspdf.jsPDF('p', 'pt', 'a4'); // the name of the global variable has changed -> const { jsPDF } = window.jspdf
        let srcwidth = document.getElementById('content').scrollWidth;

        pdf.html(document.getElementById('content'), {
            html2canvas: {
                scale: 575.26 / srcwidth, //595.26 is the width of A4 - 10 px in less for the margins rgight and left
                scrollY: 0
            },
            filename: 'jspdf',
            x: 10,
            y: 0,
            callback: function () {
                //window.open(pdf.output('bloburl'));
                pdf.save(fileName);
            }
        });

Hi, I'm using the method pdf.html() but I don't know customize the font. Apparently it could be solved my issue but I'm not really sure.

Could you please help to do that in order to solve my text issue?

Thank you

0 Answers
Related