PRINT TAG

Print tag with jsPDF and jsBarcode

by Carl Angelo Nievarez

HTML

<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="container">
  <div class=row>
    <div class=col-lg-12>
      <a id="menu-button" class="btn btn-primary">PRINT</a>
    </div>
    <div id="wrapper" class="col-lg-12" style="margin-top:10px;">
      <table>
        <tbody>
          <tr>
            <td width="35%">Customer Name: </td>
            <td width="65%">Unilever RFM Ice Cream Inc.</td>
          </tr>
          <tr>
            <td>Item Description: </td>
            <td>Conelid-Cornetto Cone-New</td>
          </tr>
          <tr>
            <td>P.O NO: </td>
            <td></td>
          </tr>
          <tr>
            <td>Schedule Number: </td>
            <td>2017060032</td>
          </tr>
          <tr>
            <td>PRODUCTION CODE: </td>
            <td>1701KF</td>
          </tr>
          <tr>
            <td>PACKED BY/ QC BY: </td>
            <td>S. DELA CRUZ</td>
          </tr>
          <tr>
            <td>DELIVERY DATE: </td>
            <td>2017-07-22</td>
          </tr>
          <tr>
            <td colspan="2"><svg id="itf-14"></svg></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

table {
  text-transform: uppercase;
}

JavaScript

function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }
    return n;
}

var itf14 = randomNumber(13);


JsBarcode("#itf-14", itf14, {format: "itf14"});

$(function() {
  $('#menu-button').click(function() {
    //$('#wrapper')[0].scrollTop=200;
    var options = {
      "background": '#000',
      format: 'PNG',
      pagesplit: true
    }
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML($('#wrapper'), options, function() {
      pdf.save('web.pdf');
    });
  });
});