css - 如何设计一个便于打印的网页？

Question

在 A4 尺寸的纸上打印网页的正确尺寸是多少？还应该考虑哪些其他内容？

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

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

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

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

score 5 · Accepted Answer

回答

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

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

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

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

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

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

score 4 · Accepted Answer

最好的方法是使用样式表中的@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;}

隐藏打印中的项目。

让我知道它是否有帮助

score 2 · Accepted Answer

使您的可打印版本尽可能简单且不受页面家具的影响。

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

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

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

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

score 2 · Accepted Answer

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

display:none; //is your friend!

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

顺便说一句，A List Apart 有这篇关于打印样式表的精彩文章，请查看。