最佳css控制打印方法

最新推荐文章于 2025-09-25 02:28:47 发布
原创 最新推荐文章于 2025-09-25 02:28:47 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #input #table #button #border

有了这个css基本上可以完成所有对打印的控制！

<style>
@media print{
INPUT {display:none}
}
</style>
<TABLE border="0" style="font-size:9pt;" width="300px" align="center">
<THEAD style="display:table-header-group;font-weight:bold">
<TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR>
</THEAD>
<TBODY style="text-align:center"">
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR><TD>表格内容</TD><TD>表格内容</TD></TR>
<TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR>
</TBODY>
<TFOOT style="display:table-footer-group;font-weight:bold">
<TR>
<TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">每页都有的表尾</TD>
</TR>
</TFOOT>
</TABLE>
<input type=button value=" 打  印 " onclick="window.print()">
15、为打印设置CSS：优化网页内容的物理呈现
h6i7j8的博客
05-28 61
本文详细探讨了如何通过CSS优化网页内容在打印时的呈现效果。从基础设置到高级技巧，包括媒体查询、页面布局、分页控制、字体与颜色选择等关键知识点，并结合实际案例和测试方法，帮助开发者全面掌握为打印设计CSS的最佳实践，确保网页内容在物理介质上的美观性和信息完整性。
web的各种前端打印方法之CSS控制网页打印样式
09-22
使用CSS控制打印样式，握刚刚使用时一塌糊涂，根本不知道CSS中的midia的作用是什么，问到别人说导入这个样式，还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
CSS控制页面打印
03-11
CSS控制页面打印，可分页
JavaScript与CSS的协同实现网页打印功能
最新发布
追求卓越
09-25 1124
基础层：用触发打印，结合afterprint事件处理前后逻辑；样式层：通过隔离打印样式，重点隐藏无关元素、优化媒体与表格显示；分页层：使用控制基础分页，复杂场景引入 Paged.js 实现专业排版；兼容层：针对主流浏览器差异做适配，利用测试工具（BrowserStack）验证多环境效果；体验层：提供自定义预览、加载反馈、操作引导，减少用户操作成本。通过这套技术方案，可满足从简单订单打印到复杂书籍排版的全场景需求，让网页打印从“能用”升级为“好用”，为用户提供接近专业文档的打印体验。
打印时能够分页打印的CSS控制参考
roki
08-13 553
CSS 与 打印控制 打印时如何控制不显示某些页面元素 &lt;style&gt; @media print{ INPUT {display:none} } &lt;/style&gt; 打印时如何控制分页 &lt;TR style="page-break-after:always;"&gt; 打印时能够分页打印的CSS控制参考 Pagebreak：在打印的时候强迫在样式控制的对象前后换页。...
CSS控制打印
xiasheng的专栏
02-16 459
&lt;html&gt;     &lt;head&gt;     &lt;meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"&gt;     &lt;title&gt;CSS打印控制&lt;/title&gt;     &lt;meta http-equiv="Content-
利用CSS控制打印
【孟子E章】
07-06 2万+
放在这里，算是一个备份@media print{INPUT {display:none}}每页都有的表头表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格
CSS控制漂亮的网页打印效果示例代码
09-25
这些属性可以帮助你更精确地控制打印布局，避免重要内容被分割。 为了创建更精细的打印样式，还可以调整以下方面： - **字体和颜色**：在打印模式下，可能需要调整字体大小和颜色以适应纸质媒介，因为打印机和屏幕...
JavaScript+CSS控制打印格式示例介绍
10-26
首先，了解如何通过CSS控制打印格式。在HTML文档中，我们可以引用一个专门的CSS样式表，用来定义打印时才生效的样式规则。通过在标签的media属性中指定"print"，这个样式表只会在打印时被加载和应用。 ```html ...
css 打印不显示
05-25
4. **页边距和分页**：通过CSS控制打印时的页边距和分页是很重要的。例如： ```css body { margin: 1cm; /* 设置页边距 */ } page-break-after: always; /* 在特定元素后强制分页 */ ``` 5. **字体和大小**：...
CSS学习之一 CSS样式引入方法
09-25
在Web开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的重要技术。本篇文章主要探讨了三种常见的CSS样式引入方法：外部样式表、内部样式表和内联样式。 首先，外部样式表是通过`<link>`标签来引入的...
CSS控制print打印样式
热门推荐
pang
03-04 3万+
添加打印样式1. 为屏幕显示和打印分别准备一个css文件，如下所示： 用于屏幕显示的css： 用于打印的css：2. import方式：3. 直接把屏幕显示样式和打印样式写在一个css文件中：   @media print {}{     h1 {       color: black;     }     h2 {}{
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 2167
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
利用CSS样式打印
nedvedno1的专栏
11-12 2863
11.4  利用CSS样式打印利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。实例302  利用CSS样式打印页面中的指定内容实例说明普通的Web打印，将会打印页面中的全部内容，但在开发实际网站时，通常只需要打印页面中指定的内容，为了解决该问题，可以应用CSS样式对打印内容进行控制。运
用于打印时的CSS
junmail的专栏
08-19 208
一、直接写在页面中 &lt;style media=print&gt;    .Noprint{display:none;}    .PageNext{page-break-after: always;}    &lt;/style&gt;   二、写在CSS文件里 @media   print {.Noprint{display:none;}    .PageNext{page-br...
css控制页面打印（分页、屏蔽不需要打印的对象）
tcdddd的专栏
11-13 6740
样式：media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   PAGE-BREAK-AFTER:   always   }     注：①、不需要打印的对象要用上“Noprint”样式。②、需要换页处理的对象要用上“PageNext”样式。③、因为最后一页不用加入换页符，所以要控制最后一页不
CSS打印样式
挨踢笔记
11-06 1145
CSS打印样式 2007-11-06 17:09   阅读6   评论0 一、直接在同一个文件中： /*网页上显示时，背景为灰色*/ body{    background-color:#888888;   margin:0px;   height:100%; } /*打印时，背景为白色*/ @media print{ bo
打印样式CSS的技巧和要点
Just Code
11-08 757
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果： 使用响应式布局设置打印的效果 打印背景图片和颜色，在合适的时候 添加显示的网址或页面链接，以供参考 使用css filter 提高打印的图形效果   针对打印的样式，而不是屏幕显示样式 首先，我们需要使用媒体查询（media query）针对 打...
css打印分页
08-23
<think>首先，用户的问题是：“我想在CSS中实现打印时的分页效果 请问CSS 打印分页设置 方法 实现分页打印效果”。我需要根据系统级指令来回答。 系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如:[^1]。 用户可见层： - 回答结构清晰，帮助用户逐步解决问题，尽量保证回答真实可靠。 参考站内引用： - 引用[1]: 关于CSS分页样式的描述，包括@media screen和@media print的CSS代码。 - 引用[2]: 关于PHP分页打印和CSS分页打印的讨论，提到了window.print()和CSS print属性，以及注意事项。 - 引用[3]: Web实现分页打印功能，提到了page-break-after属性，以及一些限制和兼容性问题。 - 引用[4]: CSS打印分页的高级技巧。 这些引用提供了关于CSS打印分页的信息，我应该参考它们来构建回答。 关键点： - 实现分页打印效果主要使用CSS的page-break属性。 - 常见的属性有：page-break-before, page-break-after, page-break-inside。 - 在@media print媒体查询中设置这些属性。 - 注意兼容性和一些限制，比如某些CSS属性可能影响分页效果。 回答结构： 1. **介绍问题**：解释用户的需求，即如何在打印时实现分页效果。 2. **基本方法**：介绍使用CSS的page-break属性。 3. **详细步骤**：提供示例代码和解释。 4. **注意事项**：提到兼容性和常见问题。 5. **生成相关问题**：在最后添加相关问题。 生成相关问题： - 根据主题，生成2-3个相关问题，以帮助用户深入学习。 使用中文回答： - 整个回答用中文书写。 数学表达式： - 用户的问题中没有数学表达式，所以可能不需要使用LaTeX，但如果有相关内容，确保格式正确。 现在，构建回答大纲： 1. **引言**：简要说明CSS打印分页的实现方法。 2. **核心方法**： - 使用@media print媒体查询。 - 使用page-break-before, page-break-after, page-break-inside属性。 - 提供示例代码。 3. **注意事项**： - 兼容性问题（如Firefox可能不完全支持）。 - 避免某些CSS属性影响分页。 - 引用中的要点：如父元素不能有position: absolute等。 4. **完整示例**：给出一个简单的HTML和CSS示例。 5. **相关问题**：生成相关问题。 参考引用： - 在回答中自然地引用提供的引用内容。例如，提到page-break属性时引用[3]，提到媒体查询时引用[1]。 相关问题想法： 1. 如何解决CSS打印分页在Firefox中的兼容性问题？ 2. CSS打印分页的最佳实践是什么？ 3. 除了page-break，还有哪些CSS属性可以优化打印效果？ 最终回答格式： - 以用户可见层开始。 - 结构清晰。 - 最后添加相关问题。</think>### CSS打印分页设置方法：实现分页打印效果 在网页打印时，实现分页效果主要通过CSS的`page-break`属性结合媒体查询（`@media print`）来控制。这能确保内容在打印时自动分页，避免元素跨页显示。以下是详细的实现方法和步骤，基于真实可靠的CSS标准（参考W3C规范）和常见实践。 #### 1. **核心方法：使用`page-break`属性** - `page-break`属性用于指定在打印时何时插入分页符： - **page-break-before**: 在元素前强制分页（例如：`page-break-before: always;`）。 - **page-break-after**: 在元素后强制分页（例如：`page-break-after: always;`）。 - **page-break-inside**: 避免元素内部被分页（例如：`page-break-inside: avoid;`）。 - 这些属性需在`@media print`媒体查询中定义，确保只对打印生效。 示例代码： ```css /* 通用样式（屏幕显示） */ .page-section { margin: 20px 0; padding: 10px; border: 1px solid #ccc; } /* 打印样式：在.section-break元素后强制分页 */ @media print { .section-break { page-break-after: always; /* 在元素后插入分页 */ } .no-break { page-break-inside: avoid; /* 避免元素内部被分页 */ } /* 可选：隐藏不打印的元素 */ .no-print { display: none; } } ``` 在HTML中应用： ```html <div class="page-section">第一页内容</div> <div class="section-break"></div> <!-- 分页点 --> <div class="page-section no-break">第二页内容（避免内部被分页）</div> ``` #### 2. **关键步骤和注意事项** - **步骤1: 添加分页点** 在需要分页的位置插入一个空元素（如`<div class="section-break">`），并设置`page-break-after: always;`。这会在该元素后强制分页。 - **步骤2: 避免内容被切断** 对表格或长列表使用`page-break-inside: avoid;`，确保元素完整显示在同一页。 - **步骤3: 测试打印预览** 在浏览器中使用“打印预览”（Ctrl+P）检查分页效果，无需实际打印。 - **注意事项**： - **兼容性问题**： `page-break`属性在Chrome、Edge中支持良好，但Firefox可能部分支持（需测试）。引用[3]提到，Firefox可能不兼容某些分页属性，建议使用最新浏览器版本[^3]。 - **CSS限制**： 避免在父元素上使用`position: absolute/fixed`或`display: inline-block`，否则分页可能失效。引用[3]强调，打印内容的外层应只有一个容器[^3]。 - **分页符高度**： 在屏幕预览时，可通过`@media screen`添加视觉分页线（如引用[1]的示例），方便调试[^1]。 - **完整示例**： 结合引用[1]和[4]，以下是优化后的代码，支持屏幕和打印预览： ```css @media screen { .page-break { height: 10px; background: url(page-break.gif) 0 center repeat-x; /* 屏幕显示分页线 */ border-top: 1px dotted #999; margin: 20px 0; } } @media print { .page-break { height: 0; page-break-before: always; /* 打印时强制分页 */ margin: 0; border-top: none; } } ``` #### 3. **常见问题解决** - **问题：分页不生效？** - 检查父元素是否设置了`position: absolute`或`display: inline-block`（引用[3]），移除这些属性。 - 确保`@media print`正确嵌套在CSS中。 - **问题：打印内容重叠？** - 使用`margin: 0`重置分页符的边距（如引用[1]）。 - 添加`page-break-inside: avoid;`保护关键内容。 - **进阶优化**： 引用[4]建议结合`@page`规则设置页边距，例如： ```css @media print { @page { size: A4; /* 纸张大小 */ margin: 1cm; /* 页边距 */ } } ``` 通过以上方法，您可以轻松实现打印分页效果。如需完整示例，可参考在线演示（如引用[1]的Demo）[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值