I have a problem with jsPDF in wordpress website which built by elementor. The exported PDF starts from the middle of the page !
In normal content it works fine, but in product server it starts from the middle, please check out This sample. Is there a way to fix it? This is the code I wrote :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<button class="btn" id="btn" onClick="printToPDF();">
Export to PDF
</button>
<div id="page">content</div>
<script>
function printToPDF() {
btn.innerText = "Converting...";
console.log('Converting...');
var printableArea = document.getElementById('page');
html2canvas(printableArea, {
useCORS: true,
onrendered: function(canvas) {
var pdf = new jsPDF('a', 'pt', 'a4');
var pageHeight = 1200;
var pageWidth = 1000;
for (var i = 0; i <= printableArea.clientHeight / pageHeight; i++) {
var srcImg = canvas;
var sX = 0;
var sY = pageHeight * i; // start 1 pageHeight down for every new page
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) // if we're on anything other than the first page, add another page
pdf.addPage(612, 791); // 8.5" x 11" in pts (inches*72)
pdf.setPage(i + 1); // now we declare that we're working on that page
pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width * .62), (height * .62)); // add content to the page
}
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
pdf.save(date+'.pdf');
btn.innerText = " Export to PDF";
}
});
}
</script>