jsPDF, плагин fromHTML не создает PDF и говорит неопределенный - PullRequest
Новая
       3

jsPDF, плагин fromHTML не создает PDF и говорит неопределенный

0 голосов
/ 15 ноября 2018

Следующий 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&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>

1 Ответ

0 голосов
/ 19 ноября 2018

Вы получаете ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'name' из неопределенного

, поскольку colspans и rowspans не поддерживаются .И стили не поддерживаются тоже.

Я написал для вас решение с плагином jsPDF .

Обходной путь / решение 

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>
...