I am using html2canvas in my Salesforce app to export a table as an pdf, but I am having problems with the header becoming misplaced when I scroll. The table is on its own div on the page and I tried having the code make it scroll to the top when I fire html2canvas but I can't do that either..
JS file
exportToPDF(event) {
event.preventDefault();
event.stopPropagation();
try {
var pdfImageToDownload = this.template.querySelector('.region-table');
const postfix = this.getPostFixFileName();
var downloadFileName = `${this.tableName}_${postfix}`;
var doc = new jspdf.jsPDF('p', 'pt', 'a4');
var scroll = document.querySelector('.table-area')?.then(
scroll.scroll({
top: 0,
behavior: 'smooth'
}));
html2canvas($(pdfImageToDownload), {
scrollY: -window.scrollY,
allowTaint: true,
logging: false,
useCORS: true,
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/jpeg');
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
doc.save(`${downloadFileName}.pdf`);
}
}
)
} catch (err) {
trace(this.componentType + ' ' + err);
}
}
HTML file - just showing the basic set up
<template><lightning-card><article><div class="table-area"> <table class="region-table"> </table> </div></article></lightning-card></template>
CSS file
.table-area {
overflow-x: auto;
max-height: 500px;
}
Edit: I guess main question is how can I scroll to the top in the component in Salesforce as a quick fix for the html2canvas issue? If I don't have the question mark or if i don't do if(scroll){scroll.scroll)} then it shows "TypeError: Cannot Read Property of Null."
