如何设计一个便于打印的网页？答案

【问题标题】：How to design a webpage to be print friendly?如何设计一个便于打印的网页？
【发布时间】：2010-01-05 10:06:31
【问题描述】：

在 A4 尺寸的纸上打印网页的正确尺寸是多少？还应该考虑什么其他的东西？

*在这种情况下首选内联 CSS

澄清：此网页的唯一建议是打印，因为它是收据。

澄清#2：此网页仅供我工作的公司内部使用。他们希望它看起来像专业设计的收据。

说明 #3：此网页必须打印在一页上 - 仅 A4 尺寸。

【问题讨论】：

【解决方案1】：

回答

我建议使用两个不同的样式表。

为了在浏览器中查看，您可以将表格宽度设置为 A4 纸的宽度：21 厘米。（减去边距 18 厘米。）

为了打印表格的大小应该是“100%”，这意味着打印机填充页面的整个宽度，使用浏览器设置给定的边距。（这些页边距使您无法使打印输出看起来完全相同。）

使表格足够窄以确保它在页边距中的安全。然后将该表垂直居中。

您无法使用 HTML 和 CSS 来实现这一点，它的设计目的不是允许精确的布局！

在线创建 PDF 并让用户下载。无论如何，大多数浏览器都能够呈现 PDF。

【讨论】：

【解决方案2】：

最好的方法是使用样式表中的@Media 命令

例如

@media print{}

用于所有控件的打印布局和

@media screen{}

用于控制屏幕布局，只是觉得你有一个

<div class="wrapper">content</div>

然后在你的媒体中你应该有

@media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}

和

@media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}

使用此@media，您可以为打印和屏幕设置完全不同的布局样式。你也可以使用

.SomeDivOrContent{visibility:hidden;display:none;}

隐藏打印中的项目。

让我知道它是否有帮助

【讨论】：

【解决方案3】：

就像其他人说的你需要使用打印 CSS，但请记住一件事：

display:none; //is your friend!

您可以使用它来确保不打印出导航等元素。

顺便说一下，A List Apart 有这个很棒的article on print stylesheets，看看吧。

【讨论】：

【解决方案4】：

使您的可打印版本尽可能简单且没有页面家具。

您应该创建一个特定于打印的样式表，该样式表至少要消除页面上的任何宽度限制，以便打印页面可以使文本流动以适合输出纸张。

您还应该知道，大多数浏览器默认不打印 CSS 背景图像，因此不要依赖它们出现在打印页面上。

编辑：在回答您的评论时，我会让收据尽可能简单。主要问题是您无法控制最终用户的打印机，因此您无法确定可打印区域的确切宽度。

使用流动/可流动的布局设计页面，并尽量保持简单。您在送货箱中收到的亚马逊收据样式可能值得借鉴。

【讨论】：