错误 - (未捕获的TypeError:对象(...)不是函数)在React中将HTML转换为PDF

时间:2017-11-16 00:44:39

标签: reactjs react-router

//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);**

1 个答案:

答案 0 :(得分:1)

  • 尝试使用npm install --save html2canvas
  • 安装html2canvas
  • 然后将其作为import * as html2canvas from 'html2canvas'导入您的js文件。

这对我有用!希望它有所帮助