我有一个使用 window.print()
打印 html 表格的应用程序,当我单击打印超链接时该应用程序工作正常,我面临的问题是分页,我浏览并找到了很多解决方案,其中大多数使用 css 来解决问题,但是当我尝试如下所示的 css 时,它不起作用。我在 JS-Fiddle 中模拟的示例演示以显示问题
在chrome中测试一下,可以看到预览,页面大小为A4可以查看分页。
@media print {
body * {
visibility: hidden;
}
div {
page-break-inside: avoid;
}
table {
page-break-after: always;
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
td {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
#printSection * {
visibility: visible;
}
#printSection {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
}
}
最佳答案
试试这个 fiddle
CSS
@media screen {
#printSection {
display: none;
}
}
@media print {
table {
page-break-after: auto;
page-break-inside: auto;
width:100%;
border-width: 1px solid #000;
font-size:16px;
font-family:Arial;
}
td{
padding:2px 5px 2px 5px;
}
}
旧堆栈溢出线程的引用
How to deal with page breaks when printing a large HTML table
用于此目的的 Javascript
只需将 js 添加到您的代码中,并将类“splitForPrint”添加到您的表格中,它就会将表格整齐地分成多个页面,并将表格标题添加到每个页面。
关于javascript - 使用 javascript 打印时出现分页问题 - Chrome、Firefox、IE9 及更高版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26523052/