本文最后更新于 318 天前,其中的信息可能已经有所发展或是发生改变。
浏览器自带的打印功能很早之前就有了,所以基本所有浏览器都支持。
我们通过 window.print()
、document.execCommand('print’)
、页面右键菜单打印等方式都可以调起打印。
不同浏览器的区别:在Safari和Chrome都会弹起打印预览的窗口,FireFox没有预览而是直接让你选择打印机,OSx下可以通过预览PDF来预览~
但是直接使用浏览器打印虽然省事,但是存在很多问题,无法满足我们的打印需求:
- 打印的是整个网页,不能打印局部内容;
- 打印不支持自定义分页行为,默认不支持批量打印;
- 打印的时候样式有问题,所见非所得;
- 打印可以准确识别的样式单位是绝对单位(如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;
}