CODEWITHSUNDEEP
angular6jspdf
venkat
venkat

Reputation: 11

why does jspdf not working on mobile web app

angular version 7 , jspdf 1.5.3

i have developing an webapp using angular7 which can use in mobile browser also . on button click i am generating pdf using jspdf but it is not working any mobile version . tried in all possible ways . alert i used to debug in mobile it please help me with this

<button (click)="generatePDF()" class='btn btn-primary pdf'><i class="far fa-file-pdf"></i>Generate PDF</button>



public generatePDF() {
    var data = document.getElementById('contentToConvert');
    var data_width = document.getElementById('contentToConvert').clientWidth;
    html2canvas(document.querySelector('#contentToConvert')).
        then(canvas => {
            var imgWidth = data_width;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            const contentDataURL = canvas.toDataURL('image/jpg', 0.5);
            let pdf = new jspdf('p', 'pt', [imgWidth + 10, imgHeight + 10], true);
            pdf.addImage(contentDataURL, 'PNG', 5, 5, imgWidth, imgHeight, undefined, 'FAST');
            let mydate = new Date()
            let month = mydate.getUTCMonth() + 1;
            let formatedDate = mydate.getUTCDate() + "_" + month + "_" + mydate.getFullYear();
            let fileName = formatedDate + '_' + 'Calendario_' + 'Darzalex_' + this._pdetails.Tratamientos
            pdf.save(fileName + ".pdf");
        });
}

Upvotes: 0

Views: 1397

Answers (1)

LP Papillon
LP Papillon

Reputation: 86

Here you are converting to jpeg:

        const contentDataURL = canvas.toDataURL('image/jpg', 0.5);

And here you are adding the image as if it was a PNG:

        pdf.addImage(contentDataURL, 'PNG', 5, 5, imgWidth, imgHeight, undefined, 'FAST');

If you have still having issues I suggest posting more details about the results you are getting. If the image is not showing then I think aligning the image formats above (all JPEG or all PNG) might fix it. If the file is not being saved, then look at filesaver.js or your app's context.

Upvotes: 1

Related Questions