添加打印样式的三种方式

在使用 window.print() 时常常会发现打印的样式十分混乱，首先是因为打印机采用的是 mm 单位，而不是我们页面常用的 px，同时有些样式在打印时也不会生效。所以一般我们都需要为打印样式重新进行设计，一般我们有三种方法添加打印专用样式文件。

第一种：媒体查询 @media print

@media print {@page {size: auto; //页面大小自动，防止打印版不全margin: 5mm; //页面边距的设定}.noprint { //不需要打印的元素display: none;}html,body,#app {background-color: #ffffff;height: auto !important;margin: 0px;border: none;}.pageBreak {/* 插入分页符，两种方法选择 */page-break-after: always;page-break-before: always;}.card::before {/* 利用伪类添加表头等 */content: '表头';font-size: 20px;display: block;text-align: center;font-weight: bold;line-height: 40px;}
}

第二种：CSS 中使用 @import … print

@import url("my-print-style.css") print;

使用这种方法时有两点需要注意，不然可能会出现编译失败：

css 文件中注释请使用 /* css标准注释 */。
如引用文件为 scss 时，请不要在 <style lang="scss"> 中使用，这样一些 scss 的函数，变量都会编译报错，最好在 main.js 中直接引用。

第三种：在 HTML 中使用标签

<link rel="stylesheet" media="print" href="my-print-style.css”>

添加打印样式的三种方式相关推荐

Intellij IDEA 添加jar包的三种方式
Intellij IDEA 添加jar包的三种方式 inzaghihalo https://blog.csdn.net/superinzaghi747/article/details/80539095 ...
创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
C# 将程序添加开机启动的三种方式
前言最近在研究程序随系统启动,发现在 win7 上因为权限的问题,写注册表的时候总是会出现问题,写不进去导致的不能自动启动,随后决定仔细的看一看这方面的问题. 查资料过程中主要发现有三种方式可以添加 ...
[Java]打印数组的三种方式
1.for循环打印第一种方式: for(int i=0;i<arr.length;i++){System.out.println(arr[i]); } 第二组方式:foreach增强型for循 ...
cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas
在 cocos2d-x 中有三个类可以在层或精灵中添加文字: LabelTTF LabelBMFont LabelAtlas LabelTTF 直接支持使用 TTF 字库,可以支持全部的中文,但是效率 ...
idea 单独引入jar_Intellij IDEA 添加jar包的三种方式
一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的lib目录下即可. 注意: 1.对于导入的eclipse项目,该方式添加的jar包没有任何反应,用make编译项目会报错 2.对于 ...
idea新增jar_Intellij IDEA 添加jar包的三种方式(小结)
一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的lib目录下即可. 注意: 1.对于导入的eclipse项目,该方式添加的jar包没有任何反应,用make编译项目会报错 2.对于 ...
Zabbix（一）安装zabbix监控服务配置与添加agent主机的三种方式
zabbix基础介绍 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系 ...

添加打印样式的三种方式

第一种：媒体查询 @media print

第二种：CSS 中使用 @import … print

第三种：在 HTML 中使用标签

添加打印样式的三种方式相关推荐

最新文章

热门文章

添加打印样式的三种方式

第一种：媒体查询 @media print

第二种：CSS 中使用 @import … print

第三种：在 HTML 中使用 标签

添加打印样式的三种方式相关推荐

最新文章

热门文章

第三种：在 HTML 中使用标签