HTML 打印样式实践总结

发布于 2024-11-05 07:09:57 字数 4382 浏览 5 评论 0

在编写 Web 页面的时候，有时候需要专门写一些便于打印的 Web 页面，如发货单，表格等。CSS 有一系列专门针对打印的样式，通过这些样式，可以设计出一个格式优雅的方便打印的 Web 页面。通过 HTML 打印样式最佳实践，本文主要整理总结了一下几个方面的内容：

1.编写打印页面时需要注意的 HTML 标签及样式
2.常用 CSS 属性介绍
3.实用工具

1. 编写打印页面是需要注意的 HTML 标签及样式

这里主要列举一些常见的 HTML 标签的注意事项，并不全面，但是已经可以覆盖绝大部分情况。

1.1 通过通配符 `*` 重置基础样式

与一般的 Web 页面不同，在设计打印页面时，我们要重置一些基础样式设置，主要有：

关闭背景色和背景图片
文本字体颜色重置为黑色
关闭文本字体阴影

* {
  background: transparent !important;
  color: black !important;
  text-shadow: none !important;
  filter:none !important; -ms-filter: none !important;
}

1.2 重置 `<a>` 样式

在打印页面中，为了更好的显示超链接，我们可以对超链接样式做如下修改：

添加下划线，在文本中突出连接
将具体连接地址显示出来（用的甚至将连接转化为二维码显示，方便扫码访问)
几种链接情况的处理：
- 一般链接：显示链接 URL
- 图片链接：不显示图片，显示链接 URL
- 锚点：不显示链接 URL
- Javascript 形式链接：不显示

a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }

1.3 `<img>` 样式

设置打印页面时，最好将图片宽度强制为相对容器 100%宽，这样可以防止图片因为太大超出打印纸张页面。

img { max-width: 100% !important; }

1.4 优化分页

可以通过 orphans/windows/page-break-after/page-break-before/page-break-inside 来优化打印页面的分页

orphans ：分页时，留在页面底部的最少行数
windows ：分页时，留在新的一页的顶部的最行数
page-break-after ：调整当前元素之后的分页， page-break-before/page-break-inside 类似

p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, ul, img { page-break-inside: avoid; }

1.5 页面设置

可以通过 CSS @page 指令来设置打印页面的基础参数，包括页面类型，页面边距等。

@page {
  size: A4;
  margin: 0.5cm;
}

1.6 完整的打印页面样式范例

@media print {
    *,*:before,*:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}