CODEWITHSUNDEEP
javascripthtmljspdf
IamCoder
IamCoder

Reputation: 33

jsPDF, fromHTML plugin does not create PDF and says undefined

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>

Upvotes: 0

Views: 2642

Answers (1)

Bharata
Bharata

Reputation: 14155

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 .

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>

Upvotes: 1

Related Questions