So I'm implementing a feature in my react web app, and in one of the Views, I have a button that takes 2 HTMLElements and display them in 2 pages in a PDF, but I would like one of them to stay hidden. The problem is that while hidden, PDFjs does not render it. Same happens when trying to set it to position:'absolute' and smth like '-999999px'.
This is the piece of code responsible for capturing and saving:
const downloadIt = () => {
const blackboard = document.getElementById('blackboard') as HTMLElement;
const descriptionList = document.getElementById('elementDescriptions') as HTMLElement;
const width = blackboard.offsetWidth;
const height = blackboard.offsetHeight;
const aspectRatio = width / height;
html2canvas(blackboard).then((canvas) => {
const pdf = new jsPDF();
const imageData = canvas.toDataURL('image/png');
const pdfHeight = pdf.internal.pageSize.getWidth() * (1 / aspectRatio);
pdf.text(comp.title, 8, 8);
pdf.addImage(imageData, 'PNG', 15, 15, pdf.internal.pageSize.getWidth() - 20, pdfHeight);
pdf.addPage();
// Add the descriptionList to the PDF
if (descriptionList) {
html2canvas(descriptionList).then((descCanvas) => {
const descData = descCanvas.toDataURL('image/png');
const descAspectRatio = descCanvas.width / descCanvas.height;
const descWidth = pdf.internal.pageSize.getWidth() - 190; // Adjust the margins as needed
const descHeight = descWidth * (1 / descAspectRatio);
pdf.addImage(descData, 'PNG', 15, 15, descWidth, descHeight);
pdf.save(`${comp.title}.pdf`);
});
} else {
pdf.save(`${comp.title}.pdf`);
}
});
};
The one I'd like to hide is the one called descriptionList, just a simple div with some Cards inside.
I've tried moving it out of the way, but it keeps giving me an error of corrupt PNG file passed to PDFjs
Via Active questions tagged javascript - Stack Overflow https://ift.tt/1MXH57F
Comments
Post a Comment