从React Components生成PDF文件 [英] Generating a PDF file from React Components

问题描述

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

I have been building a polling application. People are able to create their polls and get data regarding the question(s) they ask. I would like to add the functionality to let the users download the results in the form of a PDF.

例如，我有两个组件负责处理问题和数据.

For example I have two components which are responsible for grabbing the question and data.

<QuestionBox />
<ViewCharts />

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

I'm attempting to output both components into a PDF file. The user can then download this PFD file. I have found a few packages that permit the rendering of a PDF inside a component. However I failed to find one that can generate PDF from an input stream consisting of a virtual DOM. If I want to achieve this from scratch what approach should I follow ?

推荐答案

使用pdf进行渲染通常很麻烦，但是有一种方法可以使用canvas解决.

Rendering react as pdf is generally a pain, but there is a way around it using canvas.

这个想法是要转换: HTML->画布-> PNG(或JPEG)-> PDF

The idea is to convert : HTML -> Canvas -> PNG (or JPEG) -> PDF

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

To achieve the above, you'll need :

1. html2canvas &
2. jsPDF

1. html2canvas &
2. 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>);
  }
}

此代码段在这里不起作用，因为未导入所需文件.

The snippet will not work here because the required files are not imported.

此答案中使用了另一种方法，其中中间步骤被删除，您可以简单地从HTML转换为PDF. jsPDF文档中也可以选择执行此操作，但是从个人观察，我认为将dom首先转换为png可以实现更好的准确性.

An alternate approach is being used in this answer, where the middle steps are dropped and you can simply convert from HTML to PDF. There is an option to do this in the jsPDF documentation as well, but from personal observation, I feel that better accuracy is achieved when dom is converted into png first.

更新0:2018年9月14日

通过这种方法创建的pdf上的文本将是无法选择的.如果有此要求，您可能会发现本文很有帮助

The text on the pdfs created by this approach will not be selectable. If that's a requirement, you might find this article helpful.

这篇关于从React Components生成PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！