在 React 中将 HTML 转换为 PDF 时出现错误 -(未捕获的 TypeError: Object(...) is not a function) [英] Error - ( Uncaught TypeError: Object(...) is not a function) while converting HTML to PDF in React
本文介绍了在 React 中将 HTML 转换为 PDF 时出现错误 -(未捕获的 TypeError: Object(...) is not a function)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
//需要改成准确的数据点类子扩展组件{打印文档(){const input = document.getElementById('divToPrint');控制台日志(输入)；html2canvas(input).then((canvas) => {document.body.appendChild(canvas);const imgData = canvas.toDataURL('image/png');const pdf = 新的 jsPDF();pdf.addImage(imgData, 'JPEG', 0, 0);pdf.save("下载.pdf");}).catch(e => console.log(e));}使成为() {const mrrRecord = this.props.mrr;返回 (<身体><div><div id="divToPrint" className="mt4" {...css({背景颜色:'#f5f5f5'，宽度:'210mm'，最小高度:'297mm'，marginLeft: '自动',marginRight: '自动'})}>注意:这里div的尺寸和A4一样 你可以在这里添加任何组件<button onClick={this.printDocument}>打印</button>
</html>);}}
**注意:将 html 转换为画布时，我在以下内容中收到错误(未捕获的类型错误:Object(...) 不是函数 ()).我怀疑是因为 htmlcanvas 的输入是 html 元素，而 htmltocanvas 无法将 html 转换为正确的格式 -
html2canvas(input).then((canvas) => {document.body.appendChild(canvas);** 解决方案
- 尝试使用
npm install --save html2canvas安装 html2canvas - 然后将其作为
import * as html2canvas from 'html2canvas'导入您的 js 文件.
这对我有用！希望有帮助
//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);**
解决方案
- Try installing html2canvas using
npm install --save html2canvas - and then importing it into your js file as
import * as html2canvas from 'html2canvas'.
This worked for me! Hope it helps
这篇关于在 React 中将 HTML 转换为 PDF 时出现错误 -(未捕获的 TypeError: Object(...) is not a function)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
