快速提示：制作“打印此页面”按钮

为什么要这么做？

大多数人都知道如何打印网页，因此在网站上包含“打印此页面”按钮通常是多此一举。但有些情况下确实很有意义。我最近在为客户做的一些工作中遇到了其中一种情况，因此我想分享一下。

该网站有一个“儿童区域”，其中包含大量游戏和供孩子们娱乐的有趣内容，包括一些**涂色页**。这些涂色页是黑白轮廓图像，旨在供孩子们在家用打印机上打印出来。然后他们可以拿出蜡笔，尽情发挥=）。我想尽可能简单地让孩子们打印涂色页。起初，似乎将它们制作成 PDF 会是一个不错的解决方案，因为我可以完全控制页面并获得确定的结果。但我想得越多，就越觉得这对于孩子们来说不是一个友好的解决方案。孩子们必须下载它们，然后知道他们必须在电脑上找到它们，并在 PDF 阅读器程序中打开它们，然后从那里打印出来。我相信有很多神童对此毫无问题，但如果可能的话，我想让它变得更容易。

我决定为每个涂色页制作简单的网页。每个页面仅包含两个图像：彩色页面图像本身和顶部的一个大“打印此页面”按钮。诀窍是，在“打印此页面”按钮上使用唯一的 ID，为页面声明打印样式表，并将 display 设置为 none。

在你的 head 部分

<link rel="stylesheet" href="../../stylesheets/coloringpage.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="../../stylesheets/coloringpageprint.css" type="text/css" media="print" />

按钮

<a href="javascript:window.print()"><img src="../../images/click-here-to-print.jpg" alt="print this page" id="print-button" /></a>

涂色页图像

<img src="../../images/coloring-page-1.gif" alt="Coloring Page 1" width="1094" height="1275" />

CSS

#print-button {
	display: none;
}

按钮图像

要点

• 使页面打印尽可能简单。使用打印样式表来帮助实现。
• 不要打印“打印此页面”按钮本身。
• 只需要简单的 JavaScript 即可触发打印对话框。
• 在不同的浏览器中测试打印结果。它与屏幕显示一样，也存在差异。

我发现，尤其是在打印像我这样的一张大图像时，不同浏览器之间的结果差异很大。有些浏览器无论如何都会将图像强制到一页上，有些浏览器则可以轻松地将其分割，而打印页面上的实际大小始终是一个通配符。经过一番测试，我发现将宽度和高度强制为 1094×1275 对我来说似乎有效。这使得它在页面上尽可能大，而不会在任何浏览器上分割到两页。您的里程数可能会有所不同，这只是对我有用的方法。