css设置打印样式@page

最新推荐文章于 2024-05-02 21:15:01 发布

胡小逗儿

最新推荐文章于 2024-05-02 21:15:01 发布

阅读量1.8w

点赞数 7

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42351675/article/details/124398995

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浏览器打印

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

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

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

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

打印的是整个网页，不能打印局部内容；
打印不支持自定义分页行为，默认不支持批量打印；
打印的时候样式有问题，所见非所得；
打印可以准确识别的样式单位是绝对单位（如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设置为红色
    }
}

胡小逗儿

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
css设置打印样式@page

浏览器打印浏览器自带的打印功能很早之前就有了，所以基本所有浏览器都支持。我们通过 window.print() 、document.execCommand('print’) 、页面右键菜单打印等方式都可以调起打印。不同浏览器的区别：在Safari和Chrome都会弹起打印预览的窗口，FireFox没有预览而是直接让你选择打印机，OSx下可以通过预览PDF来预览~但是直接使用浏览器打印虽然省事，但是存在很多问题，无法满足我们的打印需求：打印的是整个网页，不能打印局部内容；打印不..
复制链接

扫一扫