.html(), how to fit content to single pdf? My div is printing into 3 total pages?

[HennDev]

Using the latest version, here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js" integrity="sha512-/Am09zlYshHgRizY3RkConGj4BsYIdb8mS7r5XAXw0rTiLgGSHzpUHTQBhinWR32C/KzLr749J1xuORzT2JnRA==" crossorigin="anonymous"></script>
</script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

	let pdf = new jsPDF('l', 'pt','a4',true);
	pdf.html(document.getElementById('mainClone'), {
		callback: function () {
			pdf.save('test.pdf');
			window.open(pdf.output('bloburl')); // to debug
		}
	});

Essentially it is printing this one element out into 3 pages (landscape). I can't figure out how to adjust the sizing properly so everything passed into the first param of html() gets used in one page. Anyone have tips on this?

Below are the results of the html table and then the resulting pdf.

https://i.imgur.com/r60rteJ.png

https://i.imgur.com/aSSBLTu.png

[antiformatiker]

I think this issue is related to #2885 .

[HennDev]

Yeah seems somewhat related but already doing the suggested new jsPDF('p', 'pt', 'a4'); options. It links to another issue without a resolution as well, strange.

I assumed maybe there was a standard solution for my problem. Trying to get a div to show full screen in the PDF regardless of its original size but maybe not.

[noobling]

Heres code snippet that only outputs to one page.

    const quality = 1 // Higher the better but larger file
    html2canvas(document.querySelector('#html'),
        { scale: quality }
    ).then(canvas => {
        const pdf = new jsPDF('p', 'mm', 'a4');
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
        pdf.save(filename);
    });

[HennDev]

Heres code snippet that only outputs to one page.

    const quality = 1 // Higher the better but larger file
    html2canvas(document.querySelector('#html'),
        { scale: quality }
    ).then(canvas => {
        const pdf = new jsPDF('p', 'mm', 'a4');
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
        pdf.save(filename);
    });

Thanks, I'll give it a shot!

[HackbrettXXX]

Note that this will render the HTML as image and not as text/vector graphics.

[HennDev]

Note that this will render the HTML as image and not as text/vector graphics.

Is there a better solution to use text/vectors? Something similar to the referenced commit earlier?

Been trying to utilize .html() and properly scaling but haven't quite been able to get it down.

[HackbrettXXX]

Currently, I think you can only try to set the scale appropriately. I created an issue to add a width option to the html method: #2925. Closing this, but you can still use this for discussion.

[yamanidev]

Is there a better solution to use text/vectors?

Any updates?

[tassaduq-ubiquify]

@HackbrettXXX
Is there any update?