以多页分页打印所有数据
Posted
技术标签:
【中文标题】以多页分页打印所有数据【英文标题】：Print all data in multiple page pagination 【发布时间】：2017-01-08 19:56:42 【问题描述】：我无法打印具有分页的数据表中的所有数据。我已经进行了研究，并在此链接中发现了同样的问题
Print <div id="printarea"></div> only?
Printing multiple pages with javascript
但是某些编码在我的项目中不起作用，或者我可能不理解编码。
这是我已经尝试过的示例编码..所以基本上我在数据库中有 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;
【问题讨论】：
你是在AJAX中工作的分页在你点击两个之后加载数据还是隐藏和显示数据 如果可以使用数据表显示数据则使用this link打印所有数据 @NareshKumar.P .. 当我单击两个时，其余数据将出现 ..从 16 到 19 ..它还将限制每个数字分页仅 15 个数据。用 ajax 工作是什么意思？ @VidhyadharGalande ...是的，您刚刚给我的这个链接...非常好..但这对我来说很难阅读代码，因为我仍然是初学者程序员。所以如果你能给我一个更简单的例子..那就太好了 我应该解释一下如何为一个表实现数据表 【参考方案1】：因此，对于此表，如果您应用打印选项，它将打印所有可用的数据，因为如果它在分页下也按您的要求进行。
DataTables 是 jQuery JavaScript 库的插件。它是一个高度灵活的工具，基于渐进增强的基础，可以向任何 HTML 表格添加高级交互控件。
您可以根据自己的意愿将 Datatable 应用于任何表格。
要在您的页面上添加的 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" 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>
因此，如果您为此表应用数据表，您将收到这样的输出。
输出：
【讨论】：
让我先试一试，然后告诉结果【参考方案2】：试试这个代码
HTML 代码
<div id="printableArea">
<table id="printableAreaTable" class="display" 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" />
输出
【讨论】：
【参考方案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://***.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。希望这可以帮助在分页数据浏览器打印方面遇到类似问题的人。
【讨论】：
以上是关于以多页分页打印所有数据的主要内容，如果未能解决你的问题，请参考以下文章