使用jsPdf和Html2Canvas将HTML页面转换为PDF格式
[First img of pdf生成位置-182，0，图像208298我正在尝试使用jspdf和Html2canvas将一个HTML页面转换为Angular 8+格式的pdf。我只能将页面的一半转换为pdf。我所知道的只是一些缩放问题 当我尝试使用Ctrl+p在Chrome中打印表单时：“我在一个页面中获得了完整表单，但没有css” 当我在mozilla中尝试同样的方法时：“它给了我两个不同的页面，没有css。” 我已经尝试了所有的例子，它们都是基于html2Canvas和jspdf的使用jsPdf和Html2Canvas将HTML页面转换为PDF格式,html,angular,typescript,jspdf,html2canvas,Html,Angular,Typescript,Jspdf,Html2canvas,[First img of pdf生成位置-182，0，图像208298我正在尝试使用jspdf和Html2canvas将一个HTML页面转换为Angular 8+格式的pdf。我只能将页面的一半转换为pdf。我所知道的只是一些缩放问题 当我尝试使用Ctrl+p在Chrome中打印表单时：“我在一个页面中获得了完整表单，但没有css” 当我在mozilla中尝试同样的方法时：“它给了我两个不同的页面，没有css。” 我已经尝试了所有的例子，它们都是基于html2Canvas和jspdf的 //p
//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.component.ts
公共捕获屏幕（）{
常量文件名='rtgs form.pdf'；
html2canvas（document.getElementById（'contentToConvert'））
)。然后（画布=>{
常量pdf=新的jspdf（'p'，'mm'，'a4'）；
addImage（canvas.toDataURL（'image/png'），'png'，0，-182，208，298）；
保存（文件名）；
});
}
//pdf.component.html
分支代码
分支机构名称
内夫特
RTGS
申请日期
到，
分行经理，
___________________分支机构
亲爱的先生，
请通过NEFT/RTGS汇出一笔金额为卢比的款项
（文字）
___________________
根据下面给出的详细信息：
现金
支票
借记我/我们的账户
*如果是现金，请填写付款单
汇款人
详细信息所有字段均为必填字段，所有
详细信息应以正楷填写
潘编号。
帐户类型
现在的
储蓄
NRE
NRO
汇款人（申请人）姓名
汇款人
账号。
现金存款（非客户）
仅适用于NEFT
交易
支票日期：
支票号码。
汇款人地址（是银行客户可选）
手机号码
PIN码：
受益人
所有字段的详细信息都是
必须，所有
详细信息应以正楷填写
受益人名称*
受益人
账号*
受益银行*
重新确认受益人
账号*
分支机构名称
和地址*
帐户类型
现在的
储蓄
NRE
NRO
IFSC代码*
汇款目的
从发送者到接收者的消息
受益人
手机号码。
印刷品
我希望用一页pdf打印整个表单。您能更改代码行吗
> 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');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
我尝试了你的代码，得到了一个不错的输入输出。请尝试让我知道。你能更改你的代码行吗
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
我尝试了你的代码，得到了一个不错的输入输出。请尝试让我知道。我自己做了一些研发，解决了这个问题 我注意到这不是我的jspdf库的问题，而是html2canvas库的问题，所拍摄的图像是一半。 所以为了解决这个问题，我使用html对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);
});
}
我自己做了一些研发工作，解决了这个问题 我注意到这不是我的jspdf库的问题，而是html2canvas库的问题，所拍摄的图像是一半。 所以为了解决这个问题，我使用html对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);
});
}
我试图更改代码，但是图像下降了，它又变了一半。我尝试更改代码，但是图像下降了，它又变了一半。但是得到表单的半图像背后的原因是什么。你能帮我吗？但是得到表单的半图像背后的原因是什么。你能帮我吗