Html 如何制作可打印版本的网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8994403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make printable version of a webpage?
提问by waa1990
I would like to make a printable version of my web page. I have already tried using CSS to make a separate stylesheet for the page but it is not working properly.(i.e. it will not get rid of margin at the top also the menu bar background will not go away.) the page consists of hundreds of tables and when i do a print preview they also get split between pages sometimes.
我想制作我的网页的可打印版本。我已经尝试使用 CSS 为页面制作单独的样式表，但它无法正常工作。（即它不会去掉顶部的边距，菜单栏背景也不会消失。）该页面由数百个表格，当我进行打印预览时，它们有时也会在页面之间拆分。
these tables are generated dynamically according to users choices in checkboxes is it possible to add a printable link which will take the content from the current page and put it into a page where it can be mad more printer friendly?
这些表格是根据用户在复选框中的选择动态生成的 是否可以添加一个可打印的链接，该链接将从当前页面获取内容并将其放入一个页面中，在那里它可以使打印机更友好？
采纳答案by entropid
There is no need of two different pages. You should create a different CSS sheet. After you copy the existing one, just set everything in black/white (or a few colours if you really need them), remove any menus and elements you don't need by putting display: none;in their CSS declaration, and to get rid of the unwanted margins. You should just put a margin: 0or margin-top: 0declaration here and there. If you don't show your HTML and CSS code is difficult to be more specific.
不需要两个不同的页面。您应该创建一个不同的 CSS 表。复制现有的后，只需将所有内容设置为黑色/白色（如果您真的需要它们，也可以设置几种颜色），通过放入display: none;它们的 CSS 声明来删除所有不需要的菜单和元素，并去除不需要的菜单和元素边距。你应该在这里和那里放一个margin: 0ormargin-top: 0声明。如果你不展示你的 HTML 和 CSS 代码就很难更具体。
回答by Zoltan Toth
You can make printer friendly version of your page with @media print
您可以使用以下命令制作页面的打印机友好版本 @media print
@media print {
your styles here
}
For example in Foundationthey have the basic rules to which you can add anything of your own:
例如在Foundation 中，它们具有基本规则，您可以向其中添加您自己的任何内容：
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
p a, p a:visited { color: #444 !important; text-decoration: underline; }
p a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
}
回答by gilly3
Use CSS with @mediarules. Define your styles for displaying on the screen with @media screenand @media printfor print-view. Control page breaks with page-break-*attributes.
将 CSS 与@media规则一起使用。定义用于在屏幕上显示@media screen和@media print用于打印视图的样式。使用page-break-*属性控制分页符。
@media screen {
body {
background-image: url(/images/background.png);
}
}
@media print {
body {
background-image: none;
}
tr {
page-break-inside: avoid;
}
}
回答by Dissident Rage
The easiest way is to make another stylesheet for the print version and add the attribute media="print"to the <link/>for it.
最简单的方法就是让另一个样式表的打印版本和属性添加media="print"到<link/>它。
