使用 jsPdf 和 Html2Canvas 在 Angular 中将 HTML 页面转换为 PDF
问题描述 投票：0回答：3
[生成的 pdf 的第一个图像，位置 -182, 0，图像 208,298 ![][1]](https://i.stack.imgur.com/EbWVU.png)
当我尝试使用 Ctrl+P 在 Chrome 中打印表单时：“我在单页中获得了完整表单，但没有 css”
当我在 mozilla 中尝试相同时：“它给了我两个没有 css 的不同页面”
我已经尝试了那里的每个示例，它们都基于 html2Canvas 和 jspdf。
//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 中。
3个回答
3
投票
投票
我自己通过一些研发解决了这个问题。
我注意到这不是我的 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);
});
}
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) 也可以调整以调整图像大小以适合您的需要。
我尝试了你的代码，并为此输入获得了不错的输出
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');
最新问题
- 如何在 Argo 工作流程模板中重用枚举？
- 使用 Curity 时添加 validate-jwt 策略在保存时失败
- 构建相似度图时，如果平均相似度得分很高，会出现问题吗？
- 如何从嵌套对象数组的第二级对象中过滤出键
- 使用 Neo4j 和 GraphSAGE 将具有多种属性类型（int、float、string）的节点转换为嵌入？
- 如何在新的 Outlook 中打开 eml 文件作为草稿
- 如何使用类似于Excel的R格式化数据布局
- 手动将 IIS Express Edge（从 VS）设置为兼容模式？
- Kong升级2.8至3.6问题
- MacOS 上的 Github 自托管运行器 - 使用提升的权限运行 Python 脚本？
- 如何销毁与 Terraform 要创建的资源冲突的现有资源？
- 如何在 zos 8.5.5.13 日志的 websphere 中抑制 ExtendedMessage: 具有 id* 消息的标签组件的属性“for”？
- Semver LRU 不是纱线工作区中的构造函数
- 从向量创建数据框
- 从 kubernetes Secret 导入数据到配置映射
- 使用 Spring Boot 处理 postgresql 的 jsonb 数据的最佳方法是什么？
- 如何在 pandas 散点图上标记异常值
- Gitlab-ci 管道中“workflow:rules”的用途是什么？
- Next.js 中的动态路由错误。尝试根据 slug 获取并显示个人详细信息
- java.io.IOException：无法运行程序“sh”
© www.soinside.com 2019 - 2024. All rights reserved.