代码之家 › 专栏 › 技术社区 › user5405873

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

html jquery javascript

user5405873 · 技术社区 · 8 年前

我想要一张大桌子 打印或转换为pdf .

问题是现在大多数列都留着打印 .

我不知道为什么 columns 是 left 对于打印 .

请参考(下面的代码段不起作用)JSFIDLE : 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 回复 | 直到 8 年前

Syed Muhammad Munis Ali 8 年前

所有的Coulmn都在这里展示!

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>