使用 CSS 打印样式为 Web 页面设置专业的打印机效果

对于有打印需求的网页,特别是文章的详情页,需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。

@media print

通过使用 @media print 媒体查询,你可以定义打印时使用的CSS规则。声明打印样式有两种方法:

使用 @media print 的媒体查询

@media print {

    .no-print {

        display: none;

    }

}

在 style 或者 link 标签使用 media=print 属性

<style media="print">...</style> 

<link rel="stylesheet" media="print" />

CSS 打印样式常见技巧

以下是一些常见的 CSS 打印样式设置的技巧:

隐藏不必要的内容

在打印时,一般都只需要显示页面中的正文内容,因此需要隐藏导航栏、广告等不需要打印的元素。

@media print {

    .no-print {

        display: none;

    }

}

设置打印友好的字体和颜色

打印机的显示和 Web 页面的显示还是有一定区别的。要知道,不是所有的浏览器默认的背景颜色都是白色,默认的字体颜色是黑色的。设置打样样式是需要使用简单的字体和明确指定白背景色和黑色文字颜色来确保打印的清晰度。

@media print {

    body {

        font-family: Arial, sans-serif;

        color: #000;

        background: #fff;

    }

}

!important 确保浏览器采用 print 的样式

上面的实例代码中都使用了 !important,这是因为在设置 print 的样式时,普通 Web 页面通用样式的层叠,可能会导致打印样式失效,这时需要特别采用 !important 来确保浏览器采用print下面的样式,例如:

@media print {

  .outline {

    &-message,

    &-toolbar {

      /* 隐藏不必要的内容 */  

      display: none !important;

    }

  }  

}

字体大小

在CSS打印样式中设置字体大小时,有几个关键点和建议可以帮助你确保打印输出的可读性和一致性。

使用相对单位

如果你的 Web 页面使用的是相对单位(如em、rem、%)。那么打印样式也应该保持一致,基础字体设置绝对大小,其它均用相对单位,可以使字体大小相对于父元素或根元素调整,确保打印时的比例一致。

@media print {

  body {

      /* 基础字体大小使用绝对值 */

      font-size: 12pt !important; 

  }

  

  h1 {

     /* 继承自body的2倍字体大小 */

      font-size: 2em !important; 

  }

  

  p {

      /* 与body相同的字体大小 */

      font-size: 1em !important; 

  }

}

使用绝对单位

如果你的 Web 页面使用的是绝对单位(如px、in、cm),那么打印样设置时要使用 pt 单位设置基础文字大小,pt 值和 px 值要最好相等,以确保打印时的字体大小固定,不受屏幕大小或其他因素的影响。

@media print {

    /* 全局字体大小 */

    body {

         

    }

    

    /* 标题字体大小 */

    h1 {

        font-size: 14pt; 

    }

    

    /* 段落字体大小 */

    p {

         

    }

}

pt 和 px 的关系

使用绝对值的时候,pt 的值怎么才能跟 Web 页面中的 px 对应呢?例如前文中希望在打印样式中使用的字体大小的绝对值与 Web 中的字体大小保持一致,要如何换算呢?

在 CSS中,pt(点)和 px(像素)是常用的单位,用于设置字体大小和其他尺寸。计算它们之间的转换可以帮助你在不同的环境中保持一致的样式。

标准屏幕分辨率(96 DPI)

1pt = 1/72 英寸

1英寸 = 96 像素

因此,1pt = 96/72 像素 ≈ 1.333px

公式

从pt转换为px:px = pt * 96 / 72

从px转换为pt:pt = px * 72 / 96

从 pt 转换为 px

12pt 转换为 px:12 * 96 / 72 = 16px

14px 转换为 px:10 * 96 / 72 ≈ 13.33px

从 px 转换为 pt

16px 转换为 pt:16 * 72 / 96 = 12pt

14px 转换为 pt:14 * 72 / 96 ≈ 14px

顺便说一下,设置打印样式的字体大小时,推荐的单位是 pt。

调整布局

在设置打印样式,由于受到打印显示区域的宽度显示,无法向 Web 页面那样在一个很宽的区域显示内容,在打印预览时很多除浮动和固定定位的内容会换行或者显示不正常。这是就需要调整布局,移除浮动和固定定位,使内容在打印时更加整齐。

@media print {

    .float-element {

        float: none !important;

    }

    .fixed-element {

        position: static !important;

    }

}

分页

控制分页符的位置,避免内容在打印时被不合理地分割。例如:

@media print {

  .page-break {

      /* 在元素之前插入分页符 */

      page-break-before: always !important; 

      /* 避免在元素内部插入分页符 */

      page-break-inside: avoid !important; 

  }

}

需要说明的是,这个分页控制需要根据特定的页面内容来设置。不是一个通用的设置技巧,并且根据我的个人实践来说,一般都不会特意设置分页控制的打印样式。

链接和媒体处理

打印界面是无法显示 Web 页面中的视频和音频信息的,因此需要隐藏视频、音频等无法打印的媒体元素,并显示链接的 URL。

@media print {

  a:after {

      /* 技巧1:在链接文字后显示 URL 地址 */

      content: " (" attr(href) ")";

  }

  /* 技巧2:在链接文字显示下划线和高亮色显示 */

  a:link,

  a:visited:

  a:hover {

     text-decoration: underline;

     color: #507afe;      

  }

  video, audio {

      display: none !important;

  }

}

说明:bootstrap 之类的 CSS 库也会有一些打印样式的设置,如果你的 Web 页面使用第三方库的,需要看看打印效果。例如 bootstrap 就设置技巧1那样的额外显示 URL 地址的链接文字,如果你不需要,需要这样覆盖:

@media print {

  a:after {

      /* 技巧1:在链接文字后显示 URL 地址 */

      content: "" !important;

  }

}  

表格打印优化

确保表格在打印时的边框和对齐方式清晰。

@media print {

  table {

      width: 100%;

      border-collapse: collapse;

  }

  th, td {

      border: 1px solid #000;

      padding: 8px;

  }

}

页眉和页脚

如果希望打印时显示页面的相关信息,还可以在打印样式中为每页添加页眉和页脚,用以显示标题、页码等信息,并且还可以设置打印的页边距。

@media print {

  @page {

    /* 设置打印的页边距 */

    /* 设置内容的上下边距,以避免页眉和页脚覆盖内容 */

    margin: 1in;

    

    /* 其它可选位置:@top-left @top-right */

    @top-center {

        /* 页眉左侧显示标题 */

        content: "Document Title"

    }

    

    /* 其它可选位置:@bottom-left @bottom-right */

    @bottom-center {

        /* 页脚右侧显示页码 */

        content: "Page "counter(page) " of "counter(pages); 

    }

  }

}

CSS 打印样式的应用实践

这里还是以我的 outline.js 项目为例,以下是使用了 outline.js 页面的原始界面:

这个是打印预览界面:

前文介绍的主要的打印页面的技巧在 outline.js 中基本都用到了。以下是完整的打印样式代码:

@media print {

  html,

  body {

    /* 打印的基础字体大小 */

    font-size: 12pt;

    /* 显示设置文字颜色和背景颜色 */

    background-color: @white;

    color: @primary_text_color;

    height: initial !important;

  }

  /* 设置链接样式 */

  a:link,

  a:visited,

  a:hover {

    text-decoration: underline !important;

    color: @primary_color;

  }

  /* 隐藏媒体标签 */

  video,

  audio {

    display: none !important;

  }

  /* 确保表格在打印时的边框和对齐方式清晰 */

  table {

    width: 100%;

    border-collapse: collapse;

  }

  th,

  td {

    border: 1px solid @primary_border_color;

    padding: 8px 20px;

  }

  .outline {

    &-message,

    &-toolbar {

      /* 隐藏了工具栏和信息提示框 */

      display: none !important;

    }

    &-reader {

      display: block !important;

      overflow: hidden;

      &__title {

        margin: 13.4pt 0 28pt !important;

        text-align: center !important;

        font-size: 32pt !important;

      }

      /* 取消了绝对定位 */

      &--reading {

        position: relative !important;

        height: auto !important;

        padding: 0 !important;

        background-color: @white;

        overflow: hidden !important;

      }

      /* 隐藏阅读进度条 */

      &__progress {

        display: none !important;

      }

      /* 打印时不显示正文 DOM 的阴影效果 */

      &__paper {

        box-shadow: none;

      }

      pre {

        padding: 1em !important;

        border: 1px solid @border_color !important;

        border-radius: 4px !important;

      }

      pre,

      code {

        background-color: @white !important;

      }

      table,

      img,

      svg {

        break-inside: avoid;

      }

      /* 所有文章内容 DOM 相关的邻居节点都隐藏了 */

      &_sibling {

        display: none !important;

      }

    }

  }

}

设置打印样式的基础字体大小和文字和背景颜色:

@media print {

  html,

  body {

    /* 打印的基础字体大小 */

    font-size: 12pt;

    /* 显示设置文字颜色和背景颜色 */

    background-color: @white;

    color: @primary_text_color;

    height: initial !important;

  }

}

设置链接文字高亮显示

@media print {

  /* 设置链接样式 */

  a:link,

  a:visited,

  a:hover {

    text-decoration: underline !important;

    color: @primary_color;

  }

}

隐藏媒体标签(内容)

@media print {

  /* 隐藏媒体标签 */

  video,

  audio {

    display: none !important;

  }

}

确保表格在打印时的边框和对齐方式清晰

@media print {

  /* 确保表格在打印时的边框和对齐方式清晰 */

  table {

    width: 100%;

    border-collapse: collapse;

  }

  th,

  td {

    border: 1px solid @primary_border_color;

    padding: 8px 20px;

  }

}

隐藏了非正文 DOM 的所有其他内容

@media print {

  .outline {

    &-message,

    &-toolbar {

      /* 隐藏了工具栏和信息提示框 */

      display: none !important;

    }

    

    /* 隐藏阅读进度条 */

    &__progress {

      display: none !important;

    }

    

    /* 所有文章内容 DOM 相关的邻居节点都隐藏了 */

    &_sibling {

      display: none !important;

    }

  }  

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/396952.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法打卡 Day19(二叉树)-平衡二叉树 + 二叉树的所有路径 + 左叶子之和 + 完全二叉树的节点个数

Leetcode 101-平衡二叉树 文章目录 Leetcode 101-平衡二叉树题目描述解题思路 Leetcode 257-二叉树的所有路径题目描述解题思路 Leetcode 404-左叶子之和题目描述解题思路 Leetcode 222-完全二叉树的节点个数题目描述解题思路 题目描述 https://leetcode.cn/problems/balanced…

Chainlit快速实现AI对话应用将聊天数据的持久化到postgres关系数据库中

概述 默认情况下&#xff0c;Chainlit 应用不会保留其生成的聊天和元素。即网页一刷新&#xff0c;所有的聊天记录&#xff0c;页面上的所有聊天记录都会消失。但是&#xff0c;存储和利用这些数据的能力可能是您的项目或组织的重要组成部分。 之前写过一篇文章《Chainlit快速…

实现高亮的全文分页检索

文章目录 &#x1f31e; Sun Frame&#xff1a;SpringBoot 的轻量级开发框架&#xff08;个人开源项目推荐&#xff09;&#x1f31f; 亮点功能&#x1f4e6; spring cloud模块概览常用工具 &#x1f517; 更多信息1.sun-club-infra 模块SubjectEsServiceImpl.java1.querySubje…

大数据-74 Kafka 高级特性 稳定性 - 控制器、可靠性 副本复制、失效副本、副本滞后 多图一篇详解

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【Linux】Linux环境基础开发工具使用之软件包管理(yum)与 Linux编辑器(vim)

目录 一、Linux 软件包管理器 yum1.1 什么是软件包1.2 关于 rzsz1.3 查看软件包1.4 如何安装软件1.5 如何卸载软件1.6 如何更新软件包1.7 yum源更新 二、 Linux编辑器-vim使用2.1 vim的基本概念2.2 vim的基本操作2.3 vim命令模式命令集2.3.1 从命令模式切换为插入模式2.3.2 从插…

03创建型设计模式——抽象工厂模式

一、抽象工厂模式简介 抽象工厂模式是所有形态的工厂模式中最为抽象和具有一般性的。抽象工厂模式可以向客户端提供一个接口&#xff0c;使得客户端在不必指定产品的具体类型的情况下&#xff0c;能够创建多个产品族的产品对象。例如现实生活中&#xff0c;水果的种类繁多&…

Vue3+Ts项目中经常遇到导入组件,vscode报无法找到模块xxx,xxx隐式拥有 “any“ 类型解决办法~

1、报错截图&#xff1a; 2、解决办法&#xff1a;在确保路径正确的情况下&#xff0c;你会在 src 目录下找到一个名为 env.d.ts 的文件&#xff08;或者类似的名称&#xff09;。在这个文件中&#xff0c;你可以声明 .vue 文件的模块类型。例如&#xff1a;(这告诉 TypeScript…

系统内存管理:虚拟内存、内存分段与分页、页表缓存TLB以及Linux内存管理

虚拟内存 虚拟内存是一种操作系统提供的机制&#xff0c;用于将每个进程分配的独立的虚拟地址空间映射到实际的物理内存地址空间上。通过使用虚拟内存&#xff0c;操作系统可以有效地解决多个应用程序直接操作物理内存可能引发的冲突问题。 在使用虚拟内存的情况下&#xff0…

IDEA打开持久层的代码很卡,关掉mybatis-plus的插件

不知道大家有没有遇到过打开 mapper 层的页面&#xff0c;然后要切换另外 java 文件的时候很卡&#xff0c;我遇到过卡了好几分钟的&#xff0c;那种继承了 mybatis-plus 的 mapper java文件或者 xml 文件都会&#xff0c;我后来把 mybatis 的插件关掉了&#xff0c;就不会了

LVS的12种调度算法详解

1.lvs调度算法类型 1.1静态方法 仅根据算法本身进行调度&#xff0c;不考虑RS的负载情况 1.2动态方法 主要根据每RS当前的负载状态及调度算法进行调度Overheadvalue较小的RS将被调度 1.1lvs静态调度算法 1.1.1RR&#xff08;轮询算法&#xff09;&#xff1a; roundrobin 轮…

Haproxy状态页

HAProxy 的状态页是一个非常有用的监控和诊断工具&#xff0c;它提供了关于 HAProxy 服务器运行状态的详细信息&#xff0c;通过web界面&#xff0c;显示当前HAProxy的运行状态。 状态页通常包含以下关键信息&#xff1a; 前端&#xff08;Frontend&#xff09;和后端&#x…

从TiDB迁移到OceanBase的实践分享

本文来自OceanBase热心用户的分享 近期&#xff0c;我们计划将业务数据库从TiDB迁移到OceanBase&#xff0c;但面临的一个主要挑战是如何更平滑的完成这一迁移过程。经过研究&#xff0c;了解到OceanBase提供的OMS数据迁移工具能够支持从TiDB到OceanBase的迁移&#xff0c;并且…

js构造函数的prototype赋值总结

我们知道通过构造函数的prototype,可以生成让所有实例对象访问的通用属性和方法,下面通过代码来解释这个过程 function Person(name){this.name name; }Person.prototype.sex man我们定义了一个构造函数Person,然后给它的prototype添加了一个sex的属性,下面我们来看看Person…

OSPF进阶

一、LSA详解 Type&#xff1a;LSA的类型&#xff08;1、2、3、4、5、7类&#xff09; link-state-ID&#xff1a;链路状态表示符 ADV router&#xff1a;产生该LSA的路由器 age&#xff1a;老化时间 Metric&#xff1a;开销值&#xff0c;一般都为ADV router到达该路由的开…

人工智能,代跑通,预测模型,模型优化

人工智能&#xff0c;代跑通&#xff0c;预测模型&#xff0c;模型优化&#xff0c;增加模块&#xff0c;文章复现&#xff0c;python代做&#xff0c;预测&#xff0c;微调&#xff0c;融合&#xff0c;深度学习&#xff0c;机器学习程序代写&#xff0c;环境调试&#xff0c;…

STM32-门电路-储存器-寄存器-STM32f1-MCU-GPIO-总线-keil5-点led-寄存器编程

1、门电路 门电路组成简单加法器&#xff1a; 二进制对电路的影响&#xff1a; 0和1代表无和有&#xff1b; 以下图例&#xff0c;演示与门&#xff1a;左1右1输出1&#xff1b; 电平标准&#xff1a;使用不同的电压表示数字0和1&#xff1b; 高电平&#xff1a;1&#xff1…

攻防世界-web-ctf-upload

题目场景 查看源码 毫无有效的数据 官方WriteUp 本题需要利用文件上传漏洞点&#xff0c;通过绕过服务器的安全防护&#xff0c;达到getshell的目的 本题的主要考点为利用fastcgi的.user.ini特性进行任意命令执行 这里需要绕过的点如下 检查文件内容是否有php字符串 检查…

haproxy七层代理

目录 一、haproxy简介 二、haproxy实验 1.环境部署 2.haproxy的基本部署方法及负载均衡的实现 2.1安装软件 2.2haproxy的基本配置 3.haproxy的全局配置参数及日志分离 3.1多线程设定 3.2自定义日志 4.haproxy-proxies中的常用配置参数 4.1设置backup --- sorryserver…

卷积神经网络(李宏毅老师系列)

自学参考&#xff1a; 一文搞懂卷积神经网络&#xff08;CNN&#xff09;的原理 视频课 课件资料 笔记 一、引入 cnn设计灵感来自于生物学中的视觉系统&#xff0c;旨在模拟人类视觉处理的方式。常用场景&#xff1a;image classification 基本步骤&#xff1a; 把所有图片都先…

数据结构--第六天

--树 -树的基本概念 树结构通常用来储存逻辑关系为“一对多”的数据&#xff0c;例如&#xff1a; 上图的这些元素具有的就是 "一对多" 的逻辑关系&#xff0c;例如元素A同时和B、C、D有关系&#xff0c;元素D同时和A、H、I、J有关系等。 观察这些元素之间的逻辑关…