css打印机样式
本文最后更新于 61 天前,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

@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”>

@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设置为红色
    }
}

背景不显示问题

* {
    -webkit-print-color-adjust:exact !important;
    -moz-print-color-adjust:exact !important;
    -ms-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
}
标题:css打印机样式
地址:https://xiaodongxier.com/2127.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇