how can i convert or print big html table into pdf using jquery javascript

Question

I have a big table that i want to either print or convert to pdf.

The problem now most of the columns are left for the print.

I don't know why columns are left for the print .

Please refer (below snippet is not working) Jsfiddle: https://jsfiddle.net/85okepx8/12/

Here is demo:

$('#print').click(function(){
   $('#examples').printThis();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.12.2/printThis.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="btn btn-warning" id="print">Print</a>

<table class="table table-boardered" id="examples">
    <thead class="thead-dark">
        <tr>
            <th>Id</th>

            <th>Customer Name</th>

            <th>Description</th>
            <th>Order Number</th>

            <th>PO Number</th>
            <th>Quantity</th>
            <th>Due Date</th>
            <th>Billing Address</th>
            <th>Shipping Address</th>
            <th>Installing Address</th>
            <th>Design</th>
            <th>Production</th>
            <th>Shipping</th>
            <th>Install</th>
            <th>Production Manager</th>
            <th>Project manager</th>
            <th>Sales Representatives</th>
            <th>Shipping Method</th>

            <th>Created At</th>

            <th>Status</th>
            <td style="display:none;"></td>
        </tr>
    </thead>

    <tbody>

        <tr>

            <td>lNsbTEo</td>
            <td>eweeedm</td>
            <td>fdvjhdhd</td>
            <td>1958</td>
            <td>445</td>
            <td>3</td>
            <td>2018/01/27 17:03</td>
            <td>fnhbbhf</td>
            <td>shipping address by me</td>
            <td>installing address</td>
            <td>design</td>
            <td>production</td>
            <td>shipping</td>
            <td>install</td>
            <td>production manager</td>
            <td>project manager</td>
            <td>kfgkk</td>
            <td>shipping method</td>

            <td style="color:#0277bd">16-01-2018</td>

            <td class="statusNotClass">
                Completed
            </td>

            <td>
            </td>

        </tr>
        
        
        <!-- second row -->
        
          <tr>

            <td>lNsbTEo</td>
            <td>eweeedm</td>
            <td>fdvjhdhd</td>
            <td>1958</td>
            <td>445</td>
            <td>3</td>
            <td>2018/01/27 17:03</td>
            <td>fnhbbhf</td>
            <td>shipping address by me</td>
            <td>installing address</td>
            <td>design</td>
            <td>production</td>
            <td>shipping</td>
            <td>install</td>
            <td>production manager</td>
            <td>project manager</td>
            <td>kfgkk</td>
            <td>shipping method</td>

            <td style="color:#0277bd">16-01-2018</td>

            <td class="statusNotClass">
                Completed
            </td>

            <td>
            </td>

        </tr>
        
        <!-- end of second row -->

    </tbody>

</table>

The intention of doing this is to have a final copy of my customer related data, to have a good insight into the customer data.

Please help me thanks in advance !!!

Answer 1

Here All coulmns are Showing !

function printContent(el) {
        var restorepage = document.body.innerHTML;
        var printcontent = document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent;
        window.print();
        document.body.innerHTML = restorepage;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#" class="btn btn-warning" id="print" onclick="printContent('examples')">Print</a>
<div class="container" id="examples">
<table class="table table-dark">
    <thead class="thead-dark">
        <tr>
            <th>Id</th>

            <th>Customer Name</th>

            <th>Description</th>
            <th>Order Number</th>

            <th>PO Number</th>
            <th>Quantity</th>
            <th>Due Date</th>
            <th>Billing Address</th>
            <th>Shipping Address</th>
            <th>Installing Address</th>
            <th>Design</th>
            <th>Production</th>
            <th>Shipping</th>
            <th>Install</th>
            <th>Production Manager</th>
            <th>Project manager</th>
            <th>Sales Representatives</th>
            <th>Shipping Method</th>

            <th>Created At</th>

            <th>Status</th>
            <td style="display:none;"></td>
        </tr>
    </thead>

    <tbody>

        <tr>

            <td>lNsbTEo</td>
            <td>eweeedm</td>
            <td>fdvjhdhd</td>
            <td>1958</td>
            <td>445</td>
            <td>3</td>
            <td>2018/01/27 17:03</td>
            <td>fnhbbhf</td>
            <td>shipping address by me</td>
            <td>installing address</td>
            <td>design</td>
            <td>production</td>
            <td>shipping</td>
            <td>install</td>
            <td>production manager</td>
            <td>project manager</td>
            <td>kfgkk</td>
            <td>shipping method</td>

            <td style="color:#0277bd">16-01-2018</td>

            <td class="statusNotClass">
                Completed
            </td>

            <td>
            </td>

        </tr>
        
        
        <!-- second row -->
        
          <tr>

            <td>lNsbTEo</td>
            <td>eweeedm</td>
            <td>fdvjhdhd</td>
            <td>1958</td>
            <td>445</td>
            <td>3</td>
            <td>2018/01/27 17:03</td>
            <td>fnhbbhf</td>
            <td>shipping address by me</td>
            <td>installing address</td>
            <td>design</td>
            <td>production</td>
            <td>shipping</td>
            <td>install</td>
            <td>production manager</td>
            <td>project manager</td>
            <td>kfgkk</td>
            <td>shipping method</td>

            <td style="color:#0277bd">16-01-2018</td>

            <td class="statusNotClass">
                Completed
            </td>

            <td>
            </td>

        </tr>
        
        <!-- end of second row -->

    </tbody>

</table>
</div>