直接从网站复制页面而不进行任何处理会导致结果不理想。
我们WEB开发者可以简单地采取几个关键点来达到比较合适的效果：
使用响应式布局的复制设置的功效
适当时复制背景图像和颜色
添加显示的 URL 或页面链接以供参考
使用css过滤器改善复制的图形效果
适用于复制样式，而非屏幕显示样式
首先，我们需要使用媒体查询（media query）进行复制样式设置。
@media print {未定义
复制时不需要重写CSS样式。 我们只需要将复制的样式进行不同的设置即可覆盖之前的默认样式。
大多数浏览器都会根据文案手动修改颜色，以节省文案素材，但我们还是尽量手动设置。
为了达到最好的效果，让色彩清晰明朗，我们至少需要包括基本的复制样式。
@media print { 正文 { 颜色：#000; 背景：#fff； } }
对于复制，大多数情况下我们不需要复制整个页面，我们只需要复制一个简单的页面，可以突出显示所需的信息，然后隐藏不相关的部分（例如导航栏、背景图片）。
10
11
12
13
14
15
16
17 号
/* 默认样式 */
h1 {未定义
颜色：#fff；
背景： url(banner.jpg);
@media print {未定义
h1 {未定义
颜色：#000；
背景：无；
导航，旁边{未定义
显示：无；
编译复制样式表时，应小心使用分米或英寸作为单位，而不是屏幕像素。 实际单位对于复印特别有用。
为了保证复制样式有效，并编写CSS样式，使复制的内容更接近纸张边缘，更好看，需要使用@page句型：
10
11
12
13
14
15
16
17 号
18
19
20
@media print {未定义
h1 {未定义
颜色：#000；
背景：无；
导航，旁边{未定义
显示：无；
正文、文章{未定义
宽度：100%；
保证金：0；
填充：0；
@页面{未定义
边距：2cm；
为了防止跨两页复制，标题和内容在页面顶部分开：
h2，h3 { 分页后：避免； }
另一种次要情况是避免图片太宽，超出纸张边缘：
img {未定义
最大宽度：100%！重要；
第三个要点是确保文章标签的内容从新页面开始：
文章{未定义
分页之前：总是；
最后，确保列表和图像没有分开在不同的页面上：
ul, img {未定义
内部分页：避免；
虽然这还不完美，但这是一个好的开始
背景图像和颜色
对于一些网站来说，颜色和背景图片还是非常必要的，必须遵循。 如果用户在webkit内核浏览器上进行复印，我们可以强制打印机复印屏幕上看到的颜色（即强制任何背景图像和颜色出现在复印页面上）。 一般来说，彩色打印机可以做到这一点。 ，我们需要一个单独的媒体查询：
@media 打印和（颜色）{未定义
* {不明确的
-webkit-打印颜色-调整：精确；
打印颜色调整：精确；
不幸的是，这并不立即适用于 Firefox Opera 和 IE。
展开复制样式中的超链接
如果直接复制，超链接将只是一小段文字，并且不会出现链接的 URL。 这样一来，就毫无意义了。
我们可以在复制的页面上显示URL链接。 我们可以使用 :after 伪类来实现这一点打印 css3，而不影响周围的元素布局：
10
@media print {未定义
文章 a {未定义
字体粗细：加粗；
文本装饰：无；
文章 a[href^=http]:after {undefined
内容：” ”;
请看下面的 HTML：
您已经浏览过该网站； 现在是时候阅读其他 Web 开发文档了。
下面是功效展示：
一个问题是打印页面上的锚文本和图像链接也会扩展。 我们几乎可以用 CSS 规则来修补这个问题。
文章 a[href^="#"]:after {undefined
内容： ””;
图像周围的链接很麻烦打印 css3，理想情况下图像周围的链接应该有一个类。
$a:after > img {未定义
内容： ””;
CSS 选择器的实现很简单：
a:not(:local-link):after {未定义
内容：” ”;
所有这些方法都假设用户将继续手动输入 URL。 更好的解决方案是通过提供匹配二维码的数字版本来使页面更易于访问。
打印链接二维码以方便访问
如下所示：
我们需要使用Microsoft Graphics API来实现：
我们希望微软提供的图形信息（qr，在我们的反例中）；
显示 QR 印记的大小（以像素为单位）；
URL编码；
使用的字符编码。
通常我们会将 URL 与页面底部的标题元素相关联：
丽莎白的沙龙
自 2001 年起提供在线智力刺激
为了达到预期的复制效果，我们将为H1提供足够的宽度来放置二维码。 由于这个二维码需要缩小到每个页面，所以我们需要添加一条CSS规则：
@media print {未定义
标题 h1:after {未定义
内容： url(://yourdomain.com&choe=UTF-8);
位置：绝对；
右：0；
顶部：0；
这种方法的缺点是它需要开发人员为每个元素请求一个 API。 如果您的主机是PHP，您可以手动生成当前页面的URL：
10
@media print {未定义
h1:{未定义之后
内容：网址（
