jsPDF, fromHTML plugin does not create PDF and says undefined

Question

The following HTML and JavaScript is used to create a receipt PDF. The PDF will print in receipt printer, the paper size in 80 mm width. And the printing height will calculate by the length of three parts(header, footer and buying items).

I tried with this code but it did not create PDF to print.

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&nbsp;&nbsp;&nbsp;&nbsp;IamCoder&nbsp;&nbsp;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>

source = $("#template_invoice")[0], is this correct? But does not work — IamCoder
– IamCoder, Commented Nov 15, 2018 at 10:17
you have another error Uncaught TypeError: Cannot read property 'name' of undefined github.com/MrRio/jsPDF/issues/516 — Jibin Mathews
– Jibin Mathews, Commented Nov 15, 2018 at 10:22

Bharata · Accepted Answer · 2018-11-21 11:19:52Z

You get an errror:

Uncaught TypeError: Cannot read property 'name' of undefined

because the colspans and rowspans are not supported. And the styling is not supported too.

I wrote for you the solution with jsPDF plugin jspdf-autotable.

Workaround / solution

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>

Thank you @Bharata. But is that width is 80 cm? Because the thermal paper width is 80 cm
@IamCoder, you have to convert 80 mm (not cm!!!) to pt, because jsPDF-autoTable plugin supports only pt sizes. You could convert it here, when you need it. The PDF in my example is 80mm width. Thanking on StackOverflow is done by upvoting and by answer accepting. If you are satisfied with my answer above, please mark it as accepted on the left side from my answer and upvote it.
Thank you. I told that 80 mm because of the paper size. Is it possible to change the items (The big tasty Pizza, Crunchy huge Buggers...) and those related data (QTY, AMOUNT, CODE, PRICE, NET TOTAL , CASH) by using them using an JSON array to used in front-end ? Otherwise, it seems to be hard coded.
@IamCoder, nothing is hard coded. All sizes you can change in front-end using JS. The PDF in my example is 80mm width. Yes, it is possible to change ALL items in JS.
Ok but your code contains all there code Which ONE place should I give the json ? like var data = ["items": [{ "no": "1", "code":"PZ4545", "item": "The big tasty Pizza", "price": "500.00", "qty":"2.00", "amount":"1000.00"}, {"no": "2", "code":"BR7878", "item": "Crunchy huge Buggers", "price": "250.00", "qty":"2.00", "amount":"500.00"}, { "no": "3", "code":"CC6523", "item": "1.5 l Coca-Cola pack", "price": "180.00", "qty":"3.00", "amount":"540.00" }]]

Collectives™ on Stack Overflow

jsPDF, fromHTML plugin does not create PDF and says undefined

1 Answer 1

11 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Linked

Related