javascript - 使用输入字段将表单转换为 PDF
问题描述
我已经设法使用 MrRio 的 jsPDF 库将我的 HTML 文档转换为 PDF。问题是我的内容是一种形式。pdf 文件显示字段名称,但我无法获得他们的输入。
<div id="editor">
<form id="content" class="text-center border border-light p-5" action="" method="POST">
<!-- Full Name -->
<div class="form-group row">
<label class="col-sm-2 col-form-label">Full Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFullName" placeholder="Full Name" required>
</div>
</div>
<!-- Adress -->
<div class="form-group row">
<label class="col-sm-2 col-form-label">Adress</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputAdress" placeholder="Adress" required>
</div>
</div>
<!-- E-mail -->
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
</div>
<!-- Password -->
<div class="form-group row">
<label class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
</div>
</form>
</div>
这是javascript代码:
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML(
$('#content').html(), 15, 15,
{ 'width': 170, 'elementHandlers': specialElementHandlers },
function(){ doc.save('sample-file.pdf'); }
);
});
我需要使用用户输入获取表单。
我已经尝试将 HTML 转换为画布,然后转换为 pdf,然后我尝试了这个。显然,此方法的实现存在局限性,因为它不支持许多元素或类。如果有人可以提供见解或有用的帮助。
解决方案
您可以通过使用 jquery 或纯 javascript 查询用户引入的值来做到这一点。
这是解决方案的一个片段:
<button id="cmd" class="btn btn-info my-4 btn-block" type="submit" onclick=" $(function () {
var doc = new jsPDF()
doc.text('Full Name: \t\t\t'+document.querySelector(`#inputFullName`).value, 10, 10)
doc.text('Adresse: \t\t\t'+document.querySelector(`#inputAdress`).value, 10, 20)
//here do the same for the rest of your inputs
doc.save('a4.pdf')
});">Send</button>
<button class="btn btn-info my-4 btn-block" type="reset">Reset</button>
推荐阅读
- qt - 用于旋转 QWidget 的 QPropertyAnimation
- ios - 以编程方式将navigationController添加到指定viewController而无需故事板swift
- jenkins - 如何获取命令maven的输出
- javascript - Javascript 输出为 PHP 变量
- javascript - 我在控制台中收到错误“您需要启用 JavaScript 才能运行此应用程序。” 反应
- angular - 如何使用 Angular 4 在 http post 请求中发送文件和 json 数据?
- java - 获取 juint socket servlet 测试类的异常
- ruby - ruby 方法查找中的*实际*步骤是什么?
- angular - Angular Material 6.0.1 树默认打开并展开/折叠所有
- entity-framework - 使用包含的 EF 核心连接