如何从React制作PDF?

时间:2016-10-04 09:43:00

标签: reactjs

我将在React.JS中使用jsPDF库但是它有错误,如果有人得到我的查询,请告诉我。我试过这个超过2天,但我不能。

3 个答案:

答案 0 :(得分:5)

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

想法是通过以下转换传递反应: DOM - > CANVAS - > PNG - > PDF

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

我已经发布了一个答案,解释了相同的更多细节和代码示例here

答案 1 :(得分:4)

步骤1:

的package.json 依赖

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

这是因为npm的jspdf无效。

步骤2:

添加打印功能:

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

它对我很好。

答案 2 :(得分:0)

您还可以使用html2pdf.js npm代替jspdf。它易于使用且没有更多错误 尽管在内部使用jspdf