[以位置-182、0，图像208,298 ][1]生成的pdf的第一张img http://www.peachpit.com/articles/article.aspx?p=2468332&seqNum=2我正在尝试使用jspdf和Html2canvas在Angular 8+中将HTML页面转换为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中。
答案 0 :(得分：0)
> As you know it is scaling Issue, The Page size is fixed:
> If data is slightly larger then the page, then you can use the jspdf > methods like: setLineWidth, setPage etc to minimize the space and >render the page into single page.
> If the content is large then it will be split into two pages. but you > can split the page when you want jspdf method addPage(format, >orientation).
> You can use code like this,
> var myImage = canvas.toDataURL("image/jpeg,1.0");
> // Adjust width and height
> var imgWidth = (canvas.width * 20) / 240;
> var imgHeight = (canvas.height * 20) / 240;
> // jspdf changes
> var pdf = new jsPDF('p', 'mm', 'a4');
> pdf.addImage(myImage, 'JPEG', 15, 2, imgWidthimgHeight); // 2: 19
> pdf.save('Download.pdf');
答案 1 :(得分：0)
您可以更改代码行
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
到
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 290, 298);
您所拥有的'-182'是放置起点，即PDF之外图像左上角的位置。另外，可以调整末尾的两个参数（208、298），以调整图像的大小以适合您的需要。
我尝试了您的代码，并为此输入Click here获得了不错的输出。请尝试让我知道。
答案 2 :(得分：0)
我自己进行一些研发已经解决了这个问题。
我注意到这不是我的 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);
});
}