使用 jsPdf 和 html2canvas 下载一个 React 组件

Question

我正在使用 html2canvas 和 jspdf 包下载一个简单的组件，但是当我点击下载时，我得到一个没有任何内容的空白 pdf 页面，并且屏幕上没有错误，这是我的代码：

import React, {Component, PropTypes} from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import Pie from './Pie.js';

class Qu extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
    
      <div id="divToPrint" className="mt4">
        <div>Title of Component</div> 
        <div><Pie /></div>
        <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      </div>
    </div>);
  }
}
export default Qu;

Answer 1

import React, {Component, PropTypes} from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import Pie from './Pie.js';

class Qu extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        let imgWidth = 208;
        let imgHeight = canvas.height * imgWidth / canvas.width;
        const imgData = canvas.toDataURL('img/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
    
      <div id="divToPrint" className="mt4">
        <div>Title of Component</div> 
        <div><Pie /></div>
        <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      </div>
    </div>);
  }
}
export default Qu;

请尝试上面的代码。

使用 jsPdf 和 html2canvas 下载一个 React 组件

Download a react component using jsPdf and html2canvas

html2canvas

jspdf

reactjs