从React Components生成PDF文件

Z时代
2024-01-10
分类：问答

我一直在构建一个轮询应用程序。人们能够创建他们的民意调查并获取有关他们提出的问题的数据。我想添加功能，以允许用户以PDF的形式下载结果。

例如，我有两个组件负责获取问题和数据。

<QuestionBox />
<ViewCharts />

我正在尝试将两个组件都输出到PDF文件中。然后，用户可以下载该PFD文件。我发现了一些允许在组件内部呈现PDF的软件包。但是，我找不到能从包含虚拟DOM的输入流中生成PDF的文件。如果我想从头开始实现此目标，应该采用哪种方法？

回答：

以pdf格式进行渲染通常是一件很痛苦的事情，但是可以使用画布解决它。

想法是转换：HTML->画布-> PNG（或JPEG）-> PDF

要实现上述目标，您需要：

html2canvas和

jsPDF

    import React, {Component, PropTypes} from 'react';
    // download html2canvas and jsPDF and save the files in app/ext, or somewhere else
    // the built versions are directly consumable
    // import {html2canvas, jsPDF} from 'app/ext';
    export default class Export 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 className="mb5">
            <button onClick={this.printDocument}>Print</button>
          </div>
          <div id="divToPrint" className="mt4" {...css({
            backgroundColor: '#f5f5f5',
            width: '210mm',
            minHeight: '297mm',
            marginLeft: 'auto',
            marginRight: 'auto'
          })}>
            <div>Note: Here the dimensions of div are same as A4</div> 
            <div>You Can add any component here</div>
          </div>
        </div>);
      }
    }