在 React 中将 HTML 转换为 PDF 时出现错误 -(未捕获的 TypeError: Object(...) is not a function)

HTML2canvas

在 React 中将 HTML 转换为 PDF 时出现错误 -(未捕获的 TypeError: Object(...) is not a function)

本文介绍了在 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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-15 11:14