jsPDF html to pdf export margins are not aligned

Marius Vasile

5y7.8k.NET

I am using a script to export html to pdf but at the bottom, the page split is no corect. the script below

var HTML_Width = $("#content").width();
            var HTML_Height = $("#content").height();
            var top_left_margin = 15;
            var PDF_Width = HTML_Width + (top_left_margin * 2);
            var PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
            var canvas_image_width = HTML_Width;
            var canvas_image_height = HTML_Height;

            var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;


            html2canvas($("#content")[0], { allowTaint: true }).then(function (canvas) {
                canvas.getContext('2d');

                console.log(canvas.height + "  " + canvas.width);


                var imgData = canvas.toDataURL("image/jpeg", 1.0);
                var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
                var options = {pagesplit: true};
                pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);


                for (var i = 1; i <= totalPDFPages; i++) {
                    pdf.addPage(PDF_Width, PDF_Height);
                    pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
                }

                pdf.save("JSA"+"-"+"@Model.JSAMain.JSANo"+".pdf");

            });

and a capture from pdf

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Marius Vasile5y ago
I found a good
function getPDF() {
    var element = document.getElementById('content');
    var opt = {
        margin: 1,
        filename: "JSA"+"-"+"@Model.JSAMain.JSANo"+".pdf",
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
    };

    html2pdf().set({
        pagebreak: { mode: 'avoid-all', inside: "avoid", before: '#page2el' }
    }).set(opt).from(element).save();
};
solution with html2pdf
+1
Sachin Singh5y ago

var form = $("#content")[0];

var a4 = [595.28, 841.89];
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
html2canvas(form, { allowTaint: true }).then(function (canvas) {
canvas.getContext('2d');
var imgWidth = 200;
var pageHeight = 290;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;

var img = canvas.toDataURL("image/jpeg");




doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;



while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}


});


doc.save("JSA"+"-"+"@Model.JSAMain.JSANo"+".pdf");
+1
Sachin Singh5y ago
use scale factor, it may be useful
var doc= new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
+1
Marius Vasile5y ago
It's getting better but I still have overlaping in pages
+1
Sachin Singh5y ago
you need to play with the height and width of the paper
`var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;

            html2canvas($("#content")[0], { allowTaint: true }).then(function (canvas) {
                canvas.getContext('2d');

                console.log(canvas.height + "  " + canvas.width);


                var imgData = canvas.toDataURL("image/jpeg", 1.0);

var doc = new jsPDF('p', 'mm');
var position = 0;

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}

doc.save("JSA"+"-"+"@Model.JSAMain.JSANo"+".pdf");
+1