【发布时间】：2018-11-15 09:55:03
【问题描述】：
以下 HTML 和 JavaScript 用于创建收据 PDF。 PDF 将在收据打印机中打印，纸张尺寸为 80 毫米宽。并且打印高度将按三部分（页眉、页脚和购买项目）的长度计算。
我尝试使用此代码，但它没有创建要打印的 PDF。
JavaScript
$(document).ready(function()
{
$(".btn").click(function()
{
var contentHeight; // header + footer + number of buying items
var doc = new jsPDF("p", "mm", [80, contentHeight]),
source = $("#template_invoice"),
margins = {
top: 10,
//bottom: 60,
left: 5,
width: 80 // Receipt printer width
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width // max width of content on PDF
},
function(dispose)
{
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
doc.save("Test.pdf");
},
margins
);
});
});
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Receipt PDF</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<style>
table{
font-family: 'Courier New', Courier, monospace;
}
td#aliCenter{
text-align:center;
}
td#aliRight{
text-align:right;
}
</style>
</head>
<body>
<div class="container" id="template_invoice">
<table>
<!-- header -->
<tr>
<td colspan="5" id="aliCenter">ABC Restaurant<br>Sunny Road, Island<br>Contact : 123456789</td>
</tr>
<tr>
<td colspan="5" id="aliCenter">15/11/2018 02:14:52 IamCoder No: 150</td>
</tr>
<tr>
<td colspan="5">
<hr>
</td>
</tr>
<tr>
<td id="aliCenter">NO</td>
<td id="aliCenter">ITEM</td>
<td id="aliCenter">QTY</td>
<td id="aliCenter">PRICE</td>
<td id="aliCenter">AMOUNT</td>
</tr>
<tr>
<td colspan="5">
<hr>
</td>
</tr>
<!-- buying items -->
<tr>
<td>1</td>
<td colspan="4">The big tasty Pizza</td>
</tr>
<tr>
<td></td>
<td>PZ4545</td>
<td>2.00</td>
<td id="aliRight">150.00</td>
<td id="aliRight">300.00</td>
</tr>
<tr>
<td>2</td>
<td colspan="4">Crunchy huge Buggers</td>
</tr>
<tr>
<td></td>
<td>BR7878</td>
<td>5.00</td>
<td id="aliRight">500.00</td>
<td id="aliRight">2500.00</td>
</tr>
<tr>
<td>3</td>
<td colspan="4">1.5 l Coca-Cola pack</td>
</tr>
<tr>
<td></td>
<td>CC6523</td>
<td>3.00</td>
<td id="aliRight">180.00</td>
<td id="aliRight">540.00</td>
</tr>
<!-- footer -->
<tr>
<td colspan="5">
<hr>
</td>
</tr>
<tr>
<td></td>
<td colspan="3">Net Total</td>
<td id="aliRight">3340.00</td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="3">Cash</td>
<td id="aliRight">3500.00</td>
</tr>
<tr>
<td></td>
<td colspan="3">Balance</td>
<td id="aliRight">160.00</td>
</tr>
<tr></tr>
<tr>
<td colspan="5" id="aliCenter">-----------IMPORTANT NOTICE-----------</td>
</tr>
<tr>
<td colspan="5" id="aliCenter">In case of a price discrepancy, <br>return the bill and item within <br> 2 days to refund the difference</td>
</tr>
</table>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-info pull-right">Download</button>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>【问题讨论】：
-
你的源是一个数组使用源[0]
-
我应该在哪里使用？
-
source = $("#template_invoice")[0],这是正确的吗？但不起作用 -
你有另一个错误 Uncaught TypeError: Cannot read property 'name' of undefined github.com/MrRio/jsPDF/issues/516
-
@JibinMathews，那我该怎么用呢？
标签： javascript html jspdf