React JS
I am using html2canvas to convert a div to image and then pdf, however in the image and pdf view the background color of elements is shifting and hence the bottom part of text is being clipped.
initial look
After converted to image/pdf
using
(on click of button, function invoked)
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
});
html2canvas(page, { scale: 1 }) // Set scale to 1 to disable scaling
.then(canvas => {
console.log(canvas.toDataURL('image/jpeg'))
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0);
pdf.save('page.pdf');
});
};
styles of div (any component) => {parent div => relative, target=> absolute (to allow drag and change position)