Menu
//need to change it to the accurate data point
class Child extends Component {
printDocument() {
const input = document.getElementById('divToPrint');
console.log(input);
html2canvas(input).then((canvas) => {
document.body.appendChild(canvas);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
}).catch(e => console.log(e));
}
render() {
const mrrRecord = this.props.mrr;
return (
<html>
<body>
<div>
<div id="divToPrint" className="mt4" {...css({
backgroundColor: '#f5f5f5',
width: '210mm',
minHeight: '297mm',
marginLeft: 'auto',
marginRight: 'auto'
})}>
Note: Here the dimensions of div are same as A4 You Can add any component here
</div>
<button onClick={this.printDocument}>Print</button>
</div>
</body>
</html>
);
}
}
**NOTE : Im getting error(Uncaught TypeError: Object(...) is not a function () ) on the following when converting html to canvas. I suspect its because input of htmlcanvas is html element and htmltocanvas is not able to convert html into the right format -
html2canvas(input).then((canvas) => {
document.body.appendChild(canvas);**
580
asked Aug 06 '26 01:08
npm install --save html2canvas import * as html2canvas from 'html2canvas'. This worked for me! Hope it helps
59
answered Aug 07 '26 16:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With