如何使用jquery javascript将大html表转换或打印成pdf

时间:2018-01-22 07:50:27

标签: javascript jquery html

我有一张大桌子,我想打印或转换为pdf

现在问题是大部分列都留给了打印

我不知道打印columnsleft的原因。

请参考(以下代码段不起作用)Jsfiddle https://jsfiddle.net/85okepx8/12/

以下是演示:

$('#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>

这样做的目的是获得客户相关数据的最终副本,以便更好地了解客户数据。

请提前帮助我!

1 个答案:

答案 0 :(得分:0)

这里所有的人都在展示!

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>