HTML打印限制为1页 [英] HTML printing limit 1 page only
问题描述
我正在打印长度可变的HTML表.当打印表格时，它可以打印1页到10页.有什么方法可以仅使用编程代码将打印限制为一页吗?是的，浏览器的打印"对话框中有一个选项可以将打印设置为仅一页(这是最后选择的选项).
I am printing an HTML table that varies in length. When printing table, it may print 1 page to 10 pages. Is there any way to limit printing to 1 page only using programming code? Yes, there is an option in the browser print dialog to set printing for 1 page only (this is last option to opt).
我正在使用window.print()方法打印HTML.
I'm printing the HTML using window.print() method.
推荐答案
您可以尝试设置一些打印CSS，如下所示:
You could try setting some print CSS like this:
@media print {
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
基本思想是使页面高度仅为100％，并隐藏溢出.这也应该只允许显示页面高度的100％=一页的内容.
The basic idea is to have the page just 100% height and hide the overflow. This should also allow to show only content of the height of 100% of the page = one page.
根据您的评论，您可能会在不同的表上显示例如五个不同的表，例如:
Based on your comment you could probably show for example five different tables on separate tables like this:
@media print {
table { /* Or specify a table class */
max-height: 100%;
overflow: hidden;
page-break-after: always;
}
}
page-break-after将告诉浏览器在每个表之后进行分页.在这种情况下，您需要放弃上面为html和body设置的CSS样式.此外，每个表格都限制为页面高度的100％.
The page-break-after will tell the browser to make a page break after each table. In this case you need to discard the CSS styles set above for html and body. Also each table is limited to 100% height of a page.
很难在这些片段iframe中包含示例，但是如果您将其保存为html文件，则可以使用以下代码尝试使用.
It's hard to include an example in these snippets iframes but here's a code you can try it with if you just save it as a html file.
<!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>
IE似乎在上述示例中遇到了麻烦，因为在常识方面始终存在麻烦.您可以包括IE特定的修复程序，也可以在所有浏览器中进行设置，但这也是IE的有效示例.这里最主要的是使用@page属性，它是大小+边距.我现在没有时间去讨论这个问题，但希望对您有帮助.
IE seems to have trouble with the above examples as it has always trouble with the common sense. You can include IE specific fixes or set these on all browsers but here's a working example also for IE. The main thing here is to play with the @page attribute and it's size + margins. I don't have the time to look at this with time right now but hopefully this helps you.
<!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>
这篇关于HTML打印限制为1页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
