[使用位置-182、0，图像208,298生成的pdf的第一张img ] [1]我正在尝试使用jspdf和Html2canvas将HTML页面转换为Angular 8+中的PDF。我只能将页面的一半转换为pdf。我所知道的是这是一个扩展问题。
当我尝试使用Ctrl + P在Chrome中打印表单时：“我在单个页面中获得了完整的表单，但没有CSS ”
当我在mozilla中尝试相同时：“它给了我两个没有CSS的不同页面”
我已经尝试了所有示例，所有示例均基于html2Canvas和jspdf。
![] [1]](https://i.stack.imgur.com/EbWVU.png){kind=link}
//pdf.component.ts
public captureScreen() {
const filename = 'rtgs-form.pdf';
html2canvas(document.getElementById('contentToConvert')
).then(canvas => {
const pdf = new jspdf('p', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
pdf.save(filename);
});
}
//pdf.component.html
<div class="container" >
<section class="top-form" id="contentToConvert" >
<img class="form-image-align" src="assets/images/topRtgsYesBank.jpg" alt="top of rtgs neft form" />
<table class="form-between-part" style="background-color: #9c9c9c; color: #000;">
<tr>
<td> Branch Code </td>
<td><input type="text" name="" id=""></td>
<td><label for=""> Branch Name </label></td>
<td><input type="text"> </td>
<td><input type="checkbox" name="" id=""> NEFT</td>
<td><input class="" type="checkbox" name="" id=""> RTGS</td>
<td><label for=""> Application Date </label></td>
<td><input type="text"></td>
</tr>
</table>
<div>
<p style="margin: 5px;">To,<br />
The Branch Manager,
___________________Branch<br />
Dear Sir,<br />
Please remit through NEFT/RTGS a sum of <span class="fas fa-rupee-sign"></span> _________ (Rupees in
words)
___________________<br />
as per details given below:<br />
<input type="checkbox" name="" id=""> Cash
<input type="checkbox" name="" id=""> Cheque
<input type="checkbox" name="" id=""> Debit my / our account</p>
<p style="margin: 5px; font-size: 10px;">*In Case of cash, please fill in the pay-in slip</p>
<p style="font-size: 10px"><b
style="background-color: #2089d4; color: white; font-size: 15px"> REMITTER
DETAILS </b> All fields are MANDATORY, All
details should be entered in BLOCK LETTERS</p>
<table class="form-between-part">
<tr>
<td id="rtgs-fixed-col">PAN No.</td>
<td colspan="4"><input class="form-between-part" type="text" name="" id=""></td>
<td id="rtgs-fixed-col">Account type</td>
<td><input type="checkbox" name="" id="">Current</td>
<td><input type="checkbox" name="" id="">Savings</td>
<td><input type="checkbox" name="" id="">NRE</td>
<td><input type="checkbox" name="" id="">NRO</td>
</tr>
<tr>
<td id="fit-in-form">Remitter <br>(Applicant) name</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Remitter <br>Account No.</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form" colspan="2">Cash Deposited (Non - Customer)<br> Only in case of NEFT
transactions</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="rtgs-fixed-col">Cheque Date:</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="rtgs-fixed-col">Cheque No.</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td rowspan="3" id="fit-in-form">Address of Remitter <i>(optional for YES BANK customers)</i></td>
<td rowspan="3" colspan="9"><textarea class="form-between-part"></textarea></td>
</tr>
</table>
<table>
<tr>
<td id="rtgs-fixed-col">Mobile Number</td>
<td colspan="5"><input type="text" class="form-between-part" name="" id=""></td>
<td id="rtgs-fixed-col">PIN code:</td>
<td id="rtgs-fixed-col"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
</table>
<p style="font-size: 10px"><b
style="background-color: #2089d4; color: white; font-size: 15px"> BENEFICIARY
DETAILS </b> All fields are
MANDATORY, All
details should be entered in BLOCK LETTERS</p>
<table class="form-between-part">
<tr>
<td id="fit-in-form">Beneficiary Name*</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Beneficiary <br>Account No.*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form" colspan="2">Beneficiary Bank*</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form-text">Re confirm Beneficiary <br>Account No.*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form-text" colspan="2">Branch Name <br>& Address*</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="rtgs-fixed-col">Account type</td>
<td><input type="checkbox" name="" id="">Current</td>
<td><input type="checkbox" name="" id="">Savings</td>
<td><input type="checkbox" name="" id="">NRE</td>
<td><input type="checkbox" name="" id="">NRO</td>
<td id="rtgs-fixed-col">IFSC code*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Purpose of<br>Remittance</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form-text">Message from <br>Sender to Receiver</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form-text">Beneficiary<br>Mobile No.</td>
<td id="rtgs-fixed-col" colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
</table>
</div>
<img class="form-image-align" src="assets/images/bottomRtgsYesBank.jpg" alt="bottom-rtgs-yes-bank" srcset="">
</section>
</div>
<div>
<button class="btn btn-primary" (click)="captureScreen()">
Print
</button>
</div>
我希望将整个表格打印在一页pdf中。
我自己进行一些研发已经解决了这个问题。
我注意到这不是我的jspdf库的问题，而是html2canvas库，所捕获的图像只有一半。因此，为了解决该问题，我使用了html-to-image npm软件包。这是我对代码进行的以下更改。
//in my component i imported
import htmlToImage from 'html-to-image';
public captureScreen() {
const filename = 'rtgs-form.pdf';
const node = document.getElementById('contentToConvert');
htmlToImage.toPng(node)
.then( (dataUrl) => {
const img = new Image();
img.src = dataUrl;
const pdf = new jspdf('p', 'mm', 'a4');
pdf.setLineWidth(1);
pdf.addImage(img, 'PNG', 0, 0, 208, 298);
pdf.save(filename);
})
.catch((error) => {
console.error('oops, something went wrong!', error);
});
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句