如何使用 React 制作 PDF？
2016-10-04
18371
我打算在 React.JS 中使用 jsPDF 库，但出现错误，如果有人收到我的查询，请告诉我。我尝试了两天多，但还是不行。
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");
}
对我来说，它工作正常。
Angel
2016-10-04
我们现在还可以将 React 组件直接转换为 pdf。
这个想法是通过以下转换传递 react-rendered： DOM -> CANVAS -> PNG -> PDF
对于 DOM 到 Canvas，我们可以使用 html2canvas 库。Canvas 到 PNG 很简单。从 PNG 到 PDF，我们可以使用 jsDom。
我已发布一个答案，其中有更多详细信息和代码示例 此处 。
Shivek Khurana
2017-07-10
1 => import import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
2 => 创建下载按钮
<button id='print-btn' className="btn btn-danger me-2" onClick={() => downloadAsPdf()}>Download</button>
const downloadAsPdf = (e) => {
savePDF(pdfExportComponent.current, { paperSize: "A3" }); }
3 => 创建一个 ref
const pdfExportComponent = React.useRef(null);
4=> 这是你的组件
<div id='PrintDocument' ref={pdfExportComponent}>
<div class="container ">
<div class="card">
<div class="card-header">
Invoice
<strong>01/01/01/2018</strong>
<span class="float-right"> <strong>Status:</strong> Pending</span>
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-sm-6">
<h6 class="mb-3">From:</h6>
<div>
<strong>Webz Poland</strong>
</div>
<div>Madalinskiego 8</div>
<div>71-101 Szczecin, Poland</div>
<div>Email: [email protected]</div>
<div>Phone: +48 444 666 3333</div>
</div>
<div class="col-sm-6">
<h6 class="mb-3">To:</h6>
<div>
<strong>Bob Mart</strong>
</div>
<div>Attn: Daniel Marek</div>
<div>43-190 Mikolow, Poland</div>
<div>Email: [email protected]</div>
<div>Phone: +48 123 456 789</div>
</div>
</div>
<div class="table-responsive-sm">
<table class="table table-striped">
<thead>
<tr>
<th class="center">#</th>
<th>Item</th>
<th>Description</th>
<th class="right">Unit Cost</th>
<th class="center">Qty</th>
<th class="right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td class="left strong">Origin License</td>
<td class="left">Extended License</td>
<td class="right">$999,00</td>
<td class="center">1</td>
<td class="right">$999,00</td>
</tr>
<tr>
<td class="center">2</td>
<td class="left">Custom Services</td>
<td class="left">Instalation and Customization (cost per hour)</td>
<td class="right">$150,00</td>
<td class="center">20</td>
<td class="right">$3.000,00</td>
</tr>
<tr>
<td class="center">3</td>
<td class="left">Hosting</td>
<td class="left">1 year subcription</td>
<td class="right">$499,00</td>
<td class="center">1</td>
<td class="right">$499,00</td>
</tr>
<tr>
<td class="center">4</td>
<td class="left">Platinum Support</td>
<td class="left">1 year subcription 24/7</td>
<td class="right">$3.999,00</td>
<td class="center">1</td>
<td class="right">$3.999,00</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-4 col-sm-5">
</div>
<div class="col-lg-4 col-sm-5 ml-auto">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">$8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Discount (20%)</strong>
</td>
<td class="right">$1,699,40</td>
</tr>
<tr>
<td class="left">
<strong>VAT (10%)</strong>
</td>
<td class="right">$679,76</td>
</tr>
<tr>
<td class="left">
<strong>Total</strong>
</td>
<td class="right">
<strong>$7.477,36</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Darshil Lunagariya
2023-10-13