以下 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>最佳答案
你得到一个错误:
Uncaught TypeError: Cannot read property 'name' of undefined
因为 colspans and rowspans are not supported .并且也不支持样式。
我为您编写了使用 jsPDF 插件 jspdf-autotable 的解决方案。
解决方法/解决方案
function alignCol(cell, data, colCount)
{
cell.styles.fillColor = false;
var col = data.column.index;
if(colCount == 1)
cell.styles.halign = 'center';
else
{
if(colCount == 2)
cell.styles.halign = 'left';
else
{
if(col < colCount - 1)
cell.styles.halign = 'left';
else cell.styles.halign = 'right'
}
}
}
$(document).ready(function()
{
$(".btn").click(function()
{
var options =
{
margin: 0,
colCount: 1,
tableWidth: 226.772,
drawHeaderRow: function(){return false},
drawHeaderCell: function(){return false},
createdCell: function(cell, data){alignCol(cell, data, options.colCount)}
},
tableWidths5 =
{
0: {columnWidth: 26},
1: {columnWidth: 50},
2: {columnWidth: 45},
3: {columnWidth: 45},
4: {columnWidth: 60}
};
// Only pt supported (not mm or in)
var contentHeight = 400; // header + footer + number of buying items
//80 mm = 226.772 pt
var doc = new jsPDF('p', 'pt', [contentHeight, 226.772]);
doc.setFontSize(3);
doc.setFont('Courier New');
doc.autoTable([0], [['ABC Restaurant\nSunny Road, Island\nContact : 123456789\n15/11/2018 02:14:52 IamCoder No: 150']], options);
doc.line(0, 60, 226, 60);
options.columnStyles = tableWidths5;
options.startY = 60;
options.colCount = 5;
doc.autoTable([0,0,0,0,0], [['NO','ITEM','QTY','PRICE','AMOUNT']], options);
doc.line(0, 80, 226, 80);
options.columnStyles = {0: {columnWidth: 26}};
options.startY = 80;
options.colCount = 2;
doc.autoTable([0,0], [[1,'The big tasty Pizza']], options);
options.columnStyles = tableWidths5;
options.startY = 100;
options.colCount = 5;
doc.autoTable([0,0,0,0,0], [[' ','PZ4545','2.00','150.00','300.00']], options);
options.columnStyles = {0: {columnWidth: 26}};
options.startY = 120;
options.colCount = 2;
doc.autoTable([0,0], [[2,'Crunchy huge Buggers']], options);
options.columnStyles = tableWidths5;
options.startY = 140;
options.colCount = 5;
doc.autoTable([0,0,0,0,0], [[' ','BR7878','5.00','500.00','2500.00']], options);
options.columnStyles = {0: {columnWidth: 26}};
options.startY = 160;
options.colCount = 2;
doc.autoTable([0,0], [[3,'1.5 l Coca-Cola pack']], options);
options.columnStyles = tableWidths5;
options.startY = 180;
options.colCount = 5;
doc.autoTable([0,0,0,0,0], [[' ','CC6523','3.00','180.00','540.00']], options);
doc.line(0, 210, 226, 210);
options.columnStyles = {0: {columnWidth: 26}};
options.startY = 220;
options.colCount = 3;
doc.autoTable([0,0,0], [
['','Net Total','3340.00'],
['','Cash','3500.00'],
['','Balance','160.00']
], options);
options.columnStyles = void 0;
options.startY = 295;
options.colCount = 1;
doc.autoTable([0], [['----------- IMPORTANT NOTICE -----------\n\nIn case of a price discrepancy, return\nthe bill and item within 2 days\nto refund the difference.']], options);
doc.save('test.pdf');
});
});<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<center><button class="btn btn-info">Download PDF</button></center>
<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="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>关于javascript - jsPDF，fromHTML 插件不会创建 PDF 并显示未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53316709/