我将在 React.JS 中使用 jsPDF 库,但它出错了,如果有人收到我的查询,请告诉我。我试图这样做超过 2 天,但我不能。
如何从 React 制作 PDF?
IT技术
reactjs
2021-05-09 10:44:35
3个回答
步骤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");
}
它对我来说效果很好。
我们现在还可以将 React 组件直接转换为 pdf。
这个想法是通过以下转换传递react渲染:DOM -> CANVAS -> PNG -> PDF
对于 DOM 到 Canvas,我们可以使用 html2canvas 库。画布到 PNG 是直截了当的。从PNG到PDF,我们可以使用jsDom。
我已经发布了一个答案,在这里解释了更多细节和代码示例。
你也可以使用 html2pdf.js npm 而不是 jspdf。虽然在内部使用 jspdf,但它易于使用且没有更多错误
其它你可能感兴趣的问题