HTML打印限制仅限1页
HTML printing limit 1 page only
我正在打印一个长度不同的HTML表。打印表时，可打印1页至10页。是否有办法将打印限制为仅使用编程代码1页?是的，在浏览器打印对话框中有一个选项可以设置只打印1页(这是最后一个选项)。
我使用window.print()方法打印HTML。
你可以尝试这样设置一些打印CSS:
@media print {
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
基本的想法是让页面只有100%的高度，并隐藏溢出。这也应该允许只显示100%的页面高度=一页的内容。
编辑:根据你的评论，你可能会像这样在单独的表上显示五个不同的表:
@media print {
table { /* Or specify a table class */
max-height: 100%;
overflow: hidden;
page-break-after: always;
}
}
page-break-after将告诉浏览器在每个表之后做一个分页符。在这种情况下，你需要放弃上面为html和body设置的CSS样式。此外，每个表被限制为100%的页面高度。
很难在这些片段iframes中包含一个示例，但是如果您只是将其保存为html文件，则可以尝试使用这里的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
width: 100%;
border: 2px solid black;
}
@media print {
table {
max-height: 100%;
overflow: hidden;
page-break-after: always;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h2>Table 1</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 2</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 3</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
</body>
</html>编辑2:
IE似乎在上面的例子中遇到了麻烦，因为它总是在常识方面遇到麻烦。你可以包含特定的IE修复，或者在所有浏览器上设置这些修复，但这里也有一个适用于IE的工作示例。这里主要的事情是玩@page属性和它的大小+边距。我现在没有时间看这个，但希望这对你有帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
table {
cell-padding: 0;
cell-spacing: 0;
width: 100%;
border: 2px solid black;
}
@page {
size: A4;
margin: 0;
}
@media print {
table {
max-height: 100% !important;
overflow: hidden !important;
page-break-after: always;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h2>Table 1</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 2</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
<table>
<tr>
<td>
<h2>Table 3</h2>
</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
</body>
</html>下面是演示在打印页面中滚动的简单代码。如果你设置高度:100%，它将打印一页，如果高度:200%，它将打印两页，等等，最好的解决方案是在你想移动到新页面的div上提供分页符。
<html>
<head>
<style>
@media print {
.parent {
overflow: scroll;
display: block;
}
.pb_after { page-break-after: always !important; }
}
</style>
<script>
setTimeout(function() {
window.print();
}, 3000);
</script>
</head>
<body>
<div class="parent">
<div class="pb_after">
Amit
</div>
<div>
Parrikar
</div>
</div>
</body>
</html>
相关文章：
- 使用javascript将动态表从一个html页面打印到另一个html页
- 打印预览没有应用程序页眉和页脚的html表格
- 计算HTML中的页数
- 使用jquery.load('pageName'）方法时，未从应用程序缓存加载Html页
- JavaScript在其他页面上用html内容填充文本框
- 带有显示XML数据的HTML的空白页
- 如何在使用jsPDF将html转换为pdf的同时，在pdf中的某个点进行分页
- HTML全页缩放取决于屏幕分辨率
- 在呈现HTML样式和脚本时加载启动页
- 在html页面的iframe中显示一个警告框
- 将php页面的一个部分渲染为HTML和CSS后生成PDF，并考虑PDF分页符
- 如何自动从一个页面移动到另一个页面，然后回到 html 表格中分页的第一页
- 如何在端口80上使用node.js提供单页html
- 如何处理在多页 HTML/jquery 应用程序中链接到脚本和 css 文件
- 具有数据切换操作的分页html
- reveal.js转换为单页html
- 将pdf转换为可编辑的单页html
- 是否可以限制用户使用一页HTML内容
- 打印的每页 HTML 脚注
- 排序，搜索(过滤)，分页HTML表
