将HTML表单输入转换为PDF -如何打印两个以上的输出
将HTML表单输入转换为PDF -如何打印两个以上的输出
提问于 2022-04-16 22:12:51
我刚开始编写代码，并尝试完成将输入数据从表单传递到PHP响应页面并在浏览器中显示。然后，用户可以单击一个按钮将HTML元素保存到PDF中。当显示两个表单输出时，代码工作。但是，一旦我从表单中添加更多的输出，javascript似乎就不会运行。我不明白出了什么问题。
HTML表单输入页面：
<!DOCTYPE html>
<html>
<body>
<img src ="ff.png">
<form action="response.php" method="post">
Invoice Number/Reference:<br>
<input type="text" name="ref"><br>
Customer Name:<br>
<input type="text" name="cname"><br>
<br>
Item:<br>
<input type="text" name="i1">
Cost
<input type="text" name="c1">
<br>
Item:<br>
<input type="text" name="i2">
Cost
<input type="text" name="c2">
<br>
Item:<br>
<input type="text" name="i3">
Cost
<input type="text" name="c3">
<br><br>
Total Cost:<br>
<input type="text" name="t1"><br><br>
<input type="submit">
</form>
</body>
</html>可下载到PDF的PHP响应页面
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
var doc = new jsPDF(); //create jsPDF object
doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
15,
15,
{
'width': 170 //set width
},
function(a)
{
doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
});
}
</script>
</head>
<body>
<div id="input_data">
<img src = "ff.png" width="150"><br>
<h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
Customer name: <?php echo $_POST["cname"]; ?><br><br>
Item: <?php echo $_POST["i1"]; ?><br>
£ <?php echo $_POST["c1"]; ?><br>
Item: <?php echo $_POST["i2"]; ?><br>
£ <?php echo $_POST["c2"]; ?><br>
Item: <?php echo $_POST["i3"]; ?><br>
£ <?php echo $_POST["c3"]; ?><br><br>
Total: <?php echo $_POST["t1"]; ?><br><br>
Thank you for choosing My Company.
</div>
<a href="javascript:generatePDF()">Dowload PDF</a>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-16 22:46:42
对于您的情况，应用jspdf.debug.js
请用</div>TEXT</div>)
- Please将字符串数据用
<div>括起来(因此使用£作为磅号(以避免在页面上查看这个字符时看到奇怪的字符)
因此，请将代码(response.php)更改为：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
var doc = new jsPDF(); //create jsPDF object
doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
15,
15,
{
'width': 170 //set width
},
function(a)
{
doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
});
}
</script>
</head>
<body>
<div id="input_data">
<img src = "ff.png" width="150"><br>
<h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
<div>Customer name: <?php echo $_POST["cname"]; ?></div><br><br>
<div>Item: <?php echo $_POST["i1"]; ?></div><br>
<div>£ <?php echo $_POST["c1"]; ?></div><br>
<div>Item: <?php echo $_POST["i2"]; ?></div><br>
<div>£ <?php echo $_POST["c2"]; ?></div><br>
<div>Item: <?php echo $_POST["i3"]; ?></div><br>
<div>£ <?php echo $_POST["c3"]; ?></div><br><br>
<div>Total: <?php echo $_POST["t1"]; ?></div><br><br>
<div>Thank you for choosing My Company.</div>
</div>
<a href="javascript:generatePDF()">Dowload PDF</a>
</body>
</html>请参见工作版本：
http://www.createchhk.com/SOanswers/testSO17apr2022.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71897840
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号