Question

我有问题打印具有分页的数据表中的所有数据。我已经做过研究，并在此链接中找到了同样的问题

但是有些编码在我的项目中不起作用，或者我可能不理解编码。

这是我已经尝试的示例编码。所以基本上我在数据库中有19个数据..但是在这个页面中我将它限制为15

所以当我点击按钮打印时，我不必去每个页面打印数据表中的所有数据。

这是我用于按钮打印的代码

<div id="printableArea">
  <h1>Print me</h1>

Javascript

function printDiv(divName) {
 var printContents = document.getElementById(divName).innerHTML;
 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;

 window.print();

 document.body.innerHTML = originalContents;
}

Answer 1

因此，对于此表，如果您应用打印选项，它将打印所有可用的数据，因为如果它也按照您的要求进行分页。

DataTables是jQuery JavaScript库的插件。它是一个高度灵活的工具，基于渐进增强的基础，并将为任何HTML表添加高级交互控件。

您可以根据自己的意愿将数据表应用于任何表格。

Js将添加到您的网页上：

$(document).ready(function(){
    $('#myTable').DataTable();
});

<强> CSS：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<强> JS：

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

HTML表：

<div id="printableArea">    
<table id="myTable" class="display" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
    </table>
</div>

因此，如果您为此表应用数据表，您将收到这样的输出。

<强>输出：

Answer 2

试用此代码

HTML代码

 <div id="printableArea">    
        <table id="printableAreaTable" class="display" width="100%" cellspacing="0">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>                    
                    <th>Salary</th>
                </tr>
            </thead>          
            <tbody>
                <tr>
                    <td>1</td>
                    <td>ABC1</td>
                    <td>100000</td>                  
                </tr>
                <tr>
                    <td>2</td>
                    <td>ABC2</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>ABC23</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>ABC4</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>ABC5</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>ABC6</td>
                    <td>100000</td>
                </tr>
                <tr>
                   <td>7</td>
                    <td>ABC7</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>ABC8</td>
                    <td>100000</td>                  
                </tr>
                <tr>
                    <td>9</td>
                    <td>ABC9</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>ABC10</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>ABC11</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>ABC12</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>ABC13</td>
                    <td>100000</td>
                </tr>
                <tr>
                   <td>14</td>
                    <td>ABC14</td>
                    <td>100000</td>
                </tr>
           </tbody>
        </table>
    </div>

的javascript

   $(document).ready(function() {
    $('#printableAreaTable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );

Js档案

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

cs文件

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />

输出

Answer 3

最近对于具有大约5000行的分页网格存在同样的问题。由于我们没有在浏览器中呈现完整数据，因此调用print()将仅显示视口中的当前行。

我们最终做的是将模型（支持网格的数据）发送回服务器，进行服务器端渲染（我们使用thymeleaf），然后将完整的html字符串发送回浏览器。现在，我们可以动态创建iframe并将内容写入其中并在iframe上调用print()。最后，我们从DOM中删除iframe。 success回调中的客户端代码如下所示：

    var printIFrame = document.createElement('iframe');
    document.body.appendChild(printIFrame);
    printIFrame.style.position = 'absolute';
    printIFrame.style.top = -999;
    printIFrame.style.left = -999;
    var frameWindow = printIFrame.contentWindow || printIFrame.contentDocument || printIFrame;
    var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
    wdoc.write(res.data);
    wdoc.close();
    // Fix for IE : Allow it to render the iframe
    frameWindow.focus();
    try {
        // Fix for IE11 - printng the whole page instead of the iframe content
        if (!frameWindow.document.execCommand('print', false, null)) {
            // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
            frameWindow.print();
        }
        // focus body as it is losing focus in iPad and content not getting printed
        document.body.focus();
    }
    catch (e) {
        frameWindow.print();
    }
    frameWindow.close();
    setTimeout(function() {
        printIFrame.parentElement.removeChild(printIFrame);
    }, 0);

对于服务器端部分，您可以使用您拥有的任何技术生成html。如果您碰巧有类似我们的堆栈（Java/Spring/Angular），请查看我的其他POST。希望这可以帮助有分页数据浏览器打印类似问题的人。

以多页分页打印所有数据

3 个答案: