how to convert whole html design to pdf with javascript

Question

I try to convert html design to pdf using this <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> I tried to design table as i want, the table looks in html like

but when i try to convert pdf it become

my html code

<div id="content">
<table id="example1" class="display table table-bordered table-striped row- 
border order-column" cellspacing="0" width="auto"> 
     <thead style="background-color: #b6b37e"> 
      <tr>
        <th>No</th>
        <th>PO Number</th>
        <th>Article Code</th>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Discount</th>
      </tr>
     </thead> 
     <tbody> 
      <tr ng-repeat="x in listData">
        <td>{{x.nomer}}</td>
        <td>{{x.po_code}}</td>
        <td>{{x.article_code}}</td>
        <td>{{x.long_description}}</td>
        <td>{{x.qty}}</td>
        <td >{{x.price | number:0}}</td>
        <td>{{x.discountpct}}</td>  
      </tr>
     </tbody> 
  </table>
  </div>

this my Javascript code

<script>
function onClick() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.canvas.height = 72 * 11;
    pdf.canvas.width = 100 * 8.5;

    var isi = document.getElementById("content");
    pdf.fromHTML(isi);

    pdf.save('Purchase_Order.pdf');
  };

  var element = document.getElementById("clickbind");
  element.addEventListener("click", onClick);
  </script>

how to make my pdf file same like html design?

Answer 1

Use html2canvas with jsPDF. Alone jsPDF can not keep css style.

You must need some plugin with jsPDF.

Below is working example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<button id="clickbind">Click</button>
<div id="content">
  <table id="example1" class="display table table-bordered table-striped row- 
border order-column" cellspacing="0" width="auto">
    <thead style="background-color: #b6b37e">
      <tr>
        <th>No</th>
        <th>PO Number</th>
        <th>Article Code</th>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Discount</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in listData">
        <td>{{x.nomer}}</td>
        <td>{{x.po_code}}</td>
        <td>{{x.article_code}}</td>
        <td>{{x.long_description}}</td>
        <td>{{x.qty}}</td>
        <td>{{x.price | number:0}}</td>
        <td>{{x.discountpct}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  function onClick() {
    html2canvas(document.body, {
      onrendered: function(canvas) {

        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF();
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save('test.pdf');
      }

    });
  };

  var element = document.getElementById("clickbind");
  element.addEventListener("click", onClick);
</script>