blocks|key|769165|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|769166|我是否需要一个不同的html页面来打印？|blockquote|769167|769168|769169|不必了。您可以使用一个不同的print+CSS，它将专门在打印时使用。在此CSS中，您可以个性化页面上不同元素的外观：|offset|length|769170|<link+rel="stylesheet"+type="text/css"+media="print"+href="print.css"+/>|code-block|syntax|javascript|769171|media="print"表示只有在打印时才会应用此CSS。|style|CODE|769172|您还可以签出print.css库。|769173|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/articles/goingtoprint/|1|http://printstylesheet.com/^0|0|0|0|0|E|9|0|0|0|0|D|0|6|9|1|0^^$0|@$1|2|3|-4|4|5|6|14|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|15|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|16|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|17|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|18|7|@]|8|@$H|19|I|1A|1|1B]]|9|$]]|$1|J|3|K|4|L|6|1C|7|@]|8|@]|9|$M|N]]|$1|O|3|P|4|5|6|1D|7|@$H|1E|I|1F|Q|R]]|8|@]|9|$]]|$1|S|3|T|4|5|6|1G|7|@]|8|@$H|1H|I|1I|1|1J]]|9|$]]|$1|U|3|-4|4|5|6|1K|7|@]|8|@]|9|$]]]|V|$W|$4|X|Y|Z|9|$10|11]]|12|$4|X|Y|Z|9|$10|13]]]]

<blockquote>
 Do I need a different html page for printing?
</blockquote>

Not necessary. You could use a different <a href="http://www.alistapart.com/articles/goingtoprint/" rel="nofollow">print CSS</a> which will specifically be used when printing. Inside this CSS you could personalize the look of different elements on your page:

<pre><code>&lt;link rel="stylesheet" type="text/css" media="print" href="print.css" /&gt;
</code></pre>

The <code>media="print"</code> means that this CSS will be applied only when printing.

You might also checkout the <a href="http://printstylesheet.com/" rel="nofollow">print.css</a> library.

blocks|key|5113751|text|您可能希望了解一下如何使用打印样式表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5113752|这里有一个可能会有帮助的链接|5113753|http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet|offset|length|5113754|这就是我建议的方法，这样你就可以让你的样式表为屏幕和打印分开。|5113755|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|22|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@$F|T|G|U|1|V]]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|E]]]]

You may want to take a look at using a print stylesheet.

Here is a link which may help

<a href="http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet" rel="nofollow">http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet</a>

This is the route that I would suggest this way you can keep your stylesheets separate for screen and print.

blocks|key|1790360|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1790361|我是否可以添加一个打印按钮，它只打印页面的正文，而不打印彩色背景？|blockquote|1790362|1790363|1790364|您可以通过以下方式设置打印机指定的样式：|1790365|@media+print+{
.print+{
++++background:#fff;
++}
}|code-block|syntax|javascript|1790366|将print类应用于要更改打印行为的元素。|offset|length|style|CODE|1790367|entityMap^0|0|0|0|0|0|0|1|5|0^^$0|@$1|2|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|V|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|Y|7|@]|8|@]|9|$]]|$1|H|3|I|4|J|6|Z|7|@]|8|@]|9|$K|L]]|$1|M|3|N|4|5|6|10|7|@$O|11|P|12|Q|R]]|8|@]|9|$]]|$1|S|3|-4|4|5|6|13|7|@]|8|@]|9|$]]]|T|$]]

<blockquote>
 Can I add a print button that prints only the body of the page, and
 without the colored background?
</blockquote>

You can set printer-specify styles via:

<pre><code>@media print {
.print {
 background:#fff;
 }
}
</code></pre>

Apply <code>print</code> class to elements you want to change the behaviour of in printing.

blocks|key|1790414|text|您可以添加一个新的特定于打印的样式表，并在该样式表中隐藏用户打印页面时不希望显示的任何元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1790415|这里有一个关于如何做到这一点的方便的链接：|1790416|http://meyerweb.com/eric/articles/webrev/200001.html|offset|length|1790417|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

You can add a new print-specific stylesheet, and in that stylesheet, hide any elements you don't want to appear when users print your page.

Here's a handy link on how to do that:

<a href="http://meyerweb.com/eric/articles/webrev/200001.html" rel="nofollow">http://meyerweb.com/eric/articles/webrev/200001.html</a>

blocks|key|1790342|text|您可以通过CSS完成此操作，只需将媒体设置为打印即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1790343|@media+print
{
++++/*+Print+specific+styles+go+in+the+braces+*/
}|code-block|syntax|javascript|1790344|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do this all through CSS, just set the media to print.

<pre><code>@media print
{
 /* Print specific styles go in the braces */
}
</code></pre>

blocks|key|1075717|text|只需添加一个print+media+stylesheet即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1075718|不需要添加自己的按钮或创建重复的页面。浏览器的打印控件完全没有问题。|1075719|entityMap|0|LINK|mutability|MUTABLE|url|http://meiert.com/en/blog/20070221/print-style-sheets-the-basics-for-no-excuses/^0|6|M|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Just add a <a href="http://meiert.com/en/blog/20070221/print-style-sheets-the-basics-for-no-excuses/" rel="nofollow">print media stylesheet</a>.

No need for adding your own button or creating duplicate pages. The browser's print controls are perfectly fine.

blocks|key|1790423|text|最好是编写print.css并指定要打印的内容和不想要的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1790424|请参阅链接|1790425|1790426|http://printstylesheet.com/|unordered-list-item|offset|length|1790427|http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet|1790428|http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/|1790429|http://www.intensivstation.ch/en/css/print/|1790430|1790431|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|0|0|0|0|R|0|0|0|22|1|0|0|2E|2|0|0|17|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|13|8|@]|9|@$H|14|I|15|1|16]]|A|$]]|$1|J|3|K|5|G|7|17|8|@]|9|@$H|18|I|19|1|1A]]|A|$]]|$1|L|3|M|5|G|7|1B|8|@]|9|@$H|1C|I|1D|1|1E]]|A|$]]|$1|N|3|O|5|G|7|1F|8|@]|9|@$H|1G|I|1H|1|1I]]|A|$]]|$1|P|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|F]]|X|$5|T|U|V|A|$W|K]]|Y|$5|T|U|V|A|$W|M]]|Z|$5|T|U|V|A|$W|O]]]]

It is better to write print.css and specify that what you want to print and what you dont want. 

See the links

<ul>
<li><a href="http://printstylesheet.com/" rel="nofollow">http://printstylesheet.com/</a></li>
<li><a href="http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet" rel="nofollow">http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet</a></li>
<li><a href="http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/" rel="nofollow">http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/</a></li>
<li><a href="http://www.intensivstation.ch/en/css/print/" rel="nofollow">http://www.intensivstation.ch/en/css/print/</a></li>
</ul>

blocks|key|769326|text|你需要做的就是(正如Darin指出的那样)为你的打印布局添加一个CSS文件。您需要确保只有使用正确的media类型才能调用CSS文件进行打印：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|769327|​|769328|entityMap^0|1E|5|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

All you need to do (as Darin pointed out) is to add a CSS file for your print layout. You need to make sure your CSS file is only called for printing by using the correct <code>media</code> type:

blocks|key|1075873|text|这是我通常使用一些jQuery这样做的方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1075874|$(function(){++
//+Hook+the+print+link
+$(+"a"+).attr(+"href",+"javascript:void(+0+)"+).click(function(){
//+Print+the+DIV+that+you+want+to+be+printble
//+Maybe+you+want+to+change+the+style+of+that+printable+div.
++$(+".printable"+).print();
//+Cancel+click+event.
return(+false+);
+});
});|code-block|syntax|javascript|1075875|这个想法是，你有一个想要打印的div，你挂起print按钮，对这个div做任何你想做的事情，然后打印它。|1075876|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is how I usually do it with some jQuery:

<pre><code>$(function(){ 
// Hook the print link
 $( "a" ).attr( "href", "javascript:void( 0 )" ).click(function(){
// Print the DIV that you want to be printble
// Maybe you want to change the style of that printable div.
 $( ".printable" ).print();
// Cancel click event.
return( false );
 });
});
</code></pre>

The idea is that you have a div that want to be printable and you hook the print button and do whatever you want with that div, and then print it.

blocks|key|769316|text|您可以尝试如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|769317|@media+print+{
++++body+{
++++++++background-color:+white
++++}

++++div.header,
++++div.footer+{
++++++++display:+none
++++}
}|code-block|syntax|javascript|769318|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can try something like this:

<pre><code>@media print {
 body {
 background-color: white
 }

 div.header,
 div.footer {
 display: none
 }
}
</code></pre>

I've got a page that is printer friendly except for the header and footer. Can I add a print button that prints only the body of the page, and without the colored background? Or do I need to link them to a new page, and then have them click print again? I'd rather not introduce these extra steps if I can avoid it.

Do I need a different html page for printing?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个页面，除了页眉和页脚之外，它对打印机是友好的。我是否可以添加一个打印按钮，只打印页面的正文，而不打印彩色背景？或者，我是否需要将它们链接到新页面，然后让它们再次单击打印？如果我可以避免的话，我宁愿不引入这些额外的步骤。

问我需要一个不同的html页面来打印吗？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我需要一个不同的html页面来打印吗？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我需要一个不同的html页面来打印吗？
EN