This code allows me to generate the PDF, from an image with canvas, when I generate it in cell or reduce the revolution (width x height), the image of the table in the PDF comes out in half; how could i fix it?
PDF - A4
<script type="text/javascript">
function demoFromHTML() {
var elementHTML = document.getElementById('resultados');
html2canvas(elementHTML, {
useCORS: true,
onrendered: function(canvas) {
var pdf = new jsPDF('p', 'pt', 'A4');
var pageHeight = 1695;
var pageWidth = 1250;
for (var i = 0; i <= elementHTML.clientHeight / pageHeight; i++) {
var srcImg = canvas;
var sX = 0;
var sY = pageHeight * i;
var sWidth = pageWidth;
var sHeight = pageHeight;
var dX = 0;
var dY = 0;
var dWidth = pageWidth;
var dHeight = pageHeight;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', pageWidth);
onePageCanvas.setAttribute('height', pageHeight);
var ctx = onePageCanvas.getContext('2d');
ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
if (i > 0)
pdf.addPage(593, 780);
pdf.setPage(i + 1);
pdf.addImage(canvasDataURL, 'JPG', 20, 40, (width * .45), (height * .45));
}
pdf.save('cotizador.pdf');
}
});
}
</script>
Good, something similar happened to me with an image that I used as a base and it was that I was putting the width and height wrong. since depending on the pixels of the image is the height and width in their values. I had to try with the different types of sizes in pixels => height and width, use this page https://www.distrimar.es/size-sheet-a4.html#:~:text=Por%20example%2C%20el %20size%C3%B1o%20de,dpi%20(dots%20per%20inch)%3A
It has some options below that you select the type of sheet A4 / Letter, etc, the pixels and gives you the size in height and width. I hope it helps you.
Cheers