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

Question

我有一个大表格，我想要打印或转换为 pdf。

现在的问题是大部分列都留待打印。

我不知道为什么列对于打印来说是左侧。

请引用(下面的代码片段不起作用)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>

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

请帮助我提前致谢!!!

Answer 1

这里所有的内容都显示出来了!

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>