css设置打印样式@page

浏览器打印

浏览器自带的打印功能很早之前就有了，所以基本所有浏览器都支持。

我们通过 window.print() 、document.execCommand('print’) 、页面右键菜单打印等方式都可以调起打印。

不同浏览器的区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox没有预览而是直接让你选择打印机，OSx下可以通过预览PDF来预览~

但是直接使用浏览器打印虽然省事，但是存在很多问题，无法满足我们的打印需求：

1. 打印的是整个网页，不能打印局部内容；
2. 打印不支持自定义分页行为，默认不支持批量打印；
3. 打印的时候样式有问题，所见非所得；
4. 打印可以准确识别的样式单位是绝对单位（如pt、mm、cm），对相对单位识别不同打印机可能会得到意想不到的结果；

CSS 打印样式

1、@media print

那么怎么控制我们打印内容的样式呢？其实就是将我们的打印样式传给打印机，引入打印文件一般有三种方式。

//  第一种：媒体查询 @media print
@media print {
    body {
        background-color: white;
    }
    img {
        visibility: hidden;
    }
    a::after {
        content: "(" attr(href) ")"; /* 所有链接后显示链接地址 */
    }
}


// 第二种：CSS 中使用 @import … print
@import url("my-print-style.css") print;


// 第三种：在 HTML 中使用 <Link> 标签
<link rel="stylesheet" media="print" href="my-print-style.css”>

2、@page

用来设置页面大小、边距、方向等。在@page里面可以使用页面外边距盒子，类似伪类的使用。

@page {
    size: A4 portrait; /*  */
    margin: 3.7cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */
}


// 去除页眉
@page { margin-top: 0; }

// 去除页脚
@page { margin-bottom: 0; }

// 页眉页脚全部去掉
@page { margin: 0; }

 设置纸张及其方向 portrait：纵向；  landscape: 横向

@media print {//media标签
    @page {
        size: A5 portrait; //设置纸张及其方向 portrait：纵向；  landscape: 横向
        margin-top: 0mm;//去掉页眉
        margin-bottom:0mm;//去掉页脚
    }
    h4{
        color:red;//打印时将标签h4设置为红色
    }
}