如何从 React 制作 PDF？答案

【问题标题】：How to make PDF from React?如何从 React 制作 PDF？
【发布时间】：2017-02-12 10:16:28
【问题描述】：

我打算在 React.JS 中使用 jsPDF 库，但它出错了，如果有人收到我的查询，请告诉我。我尝试了超过 2 天，但我做不到。

【问题讨论】：

可以，您可以上传您正在使用的示例代码。
你尝试过什么？什么样的错误？
解决了，请看解决方案。
另见：Generating a PDF file from React Components
基于这个问题我写了一个关于这个主题的简短教程：React Component to PDF

标签： reactjs

【解决方案1】：

第一步：

包.json 依赖关系

"jspdf": "git://github.com/MrRio/jsPDF/#76edb3387cda3d5292e212765134b06150030364",

这是由于 npm 的 jspdf 不起作用。

第二步：

添加打印功能：

onPrint() {
    const { vehicleData } = this.props.parkedVehicle;
    const { 


    plate_no,
      max_time,
      entry_date_time,
      exit_date_time,
      expiry_time,
      address1,
      address2,
      city,
      state,
      zip,
      country,
      parking_status
    } = vehicleData;

    var pdfConverter = require('jspdf');
    //var converter = new pdfConverter();
    //var doc = converter.jsPDF('p', 'pt');

    var doc = new pdfConverter('p','pt','c6');

    doc.setFontSize(22);
    doc.text(20, 50, 'Park Entry Ticket');
    doc.setFontSize(16);
    doc.text(20, 80, 'Address1: ' + address1);
    doc.text(20, 100, 'Address2: ' + address2);
    doc.text(20, 120, 'Entry Date & time: ' + entry_date_time);
    doc.text(20, 140, 'Expiry date & time: ' + exit_date_time);
    doc.save("test.pdf");
}

它对我来说很好。

【讨论】：

如果有人在 2019 年看到这个，我正在尝试使用此代码，但它说“道具”未定义。

【解决方案2】：

我们现在还可以将 React 组件直接转换为 pdf。

这个想法是通过以下转换传递反应渲染： DOM -> 画布 -> PNG -> PDF

对于 DOM 到 Canvas，我们可以使用 html2canvas 库。画布到 PNG 是直截了当的。从 PNG 到 PDF，我们可以使用 jsDom。

我已经发布了一个答案，其中包含更多详细信息和代码示例here。

【讨论】：

通过这种方法可以复制创建的pdf上的文字吗？
使用此方法，pdf由图像构成，因此文本不可选择。

【解决方案3】：

您也可以使用 html2pdf.js npm 代替 jspdf。它易于使用且无错误虽然在内部它使用 jspdf

【讨论】：