从 React 组件生成 PDF 文件

Question

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

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

 <QuestionBox />
<ViewCharts />

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

原文由 Ozan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 react 渲染为 pdf 通常很痛苦，但有一种方法可以使用画布。

这个想法是转换： HTML -> Canvas -> PNG（或 JPEG） -> PDF

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

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>);
  }
}

该代码段在此处不起作用，因为未导入所需的文件。

此答案 中使用了另一种方法，其中中间步骤被删除，您可以简单地从 HTML 转换为 PDF。 jsPDF文档中也有这样做的选项，但是从个人观察，我觉得先将dom转成png的时候精度更高。

更新 0：2018 年 9 月 14 日

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

原文由 Shivek Khurana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

React-PDF 是一个很好的资源。

将标记和 CSS 转换为 React-PDF 的格式有点耗时，但很容易理解。从中导出 PDF 非常简单。

要允许用户下载由 react-PDF 生成的 PDF，请使用他们的 on the fly rendering ，它提供了一个可定制的下载链接。单击时，网站会为用户呈现和下载 PDF。

这是他们的 REPL ，它将使您熟悉所需的标记和样式。他们也有 PDF 的下载链接，但他们没有在此处显示该链接的代码。

原文由 Caleb Hensley 发布，翻译遵循 CC BY-SA 4.0 许可协议