//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(...)不是函数())。我怀疑它是因为输入htmlcanvas是html元素而htmltocanvas无法将html转换为正确的格式 -
html2canvas(input).then((canvas) => {
document.body.appendChild(canvas);**
答案 0 :(得分:1)
npm install --save html2canvas
import * as html2canvas from 'html2canvas'
导入您的js文件。 这对我有用!希望它有所帮助