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?

Please check https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript — Manoj Bhardwaj, Apr 05 '18 at 05:00

score 11 · Accepted Answer · answered Apr 05 '18 at 05:00

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>

its good @VicJordan, but can u help me little bit more, i dnt want to catch all of body fill, can I select for catch the specific div content ID? how to make it? — s-dept, Apr 05 '18 at 05:12

score 1 · Answer 2 · edited Sep 04 '20 at 09:32

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="Print Div Contents" id="btnPrint" />
        <div>
            <table>
                <tbody>
                    <tr>
                        <th>Company</th>
                        <th>Contact</th>
                        <th>Country</th>
                    </tr>
                    <tr>
                        <td>Alfreds Futterkiste</td>
                        <td>Maria Anders</td>
                        <td>Germany</td>
                    </tr>
                    <tr>
                        <td>Centro comercial Moctezuma</td>
                        <td>Francisco Chang</td>
                        <td>Mexico</td>
                    </tr>

                    <tr>
                        <td>Island Trading</td>
                        <td>Helen Bennett</td>
                        <td>UK</td>
                    </tr>
                    <tr>
                        <td>Laughing Bacchus Winecellars</td>
                        <td>Yoshi Tannamuri</td>
                        <td>Canada</td>
                    </tr>
                    <tr>
                        <td>Magazzini Alimentari Riuniti</td>
                        <td>Giovanni Rovelli</td>
                        <td>Italy</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
<script type="text/javascript">
    $("#btnPrint").click(function () {
        let doc = new jsPDF('p', 'pt', 'a4');
        doc.addHTML(document.body, function () {
            doc.save('testpoc.pdf');
        });
    });
</script>
</html>

how to convert whole html design to pdf with javascript

2 Answers2