//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>
);
}
}
**注意:将 html 转换为画布时,我在以下内容中收到错误(Uncaught TypeError: Object(...) is not a function () )。我怀疑是因为 htmlcanvas 的输入是 html 元素,而 htmltocanvas 无法将 html 转换为正确的格式 -
html2canvas(input).then((canvas) => {
document.body.appendChild(canvas);**