gpt4 book ai didi

浏览器打印方案

转载 作者:我是一只小鸟 更新时间:2022-11-26 06:42:04 29 4
gpt4 key购买 nike

前言

在web端打印是比较常见的需求,实际工作中也接触了不少,在这里对工作中用到的做一下总结 。

1.通过媒体查询隐藏元素

通过style标签内联引入,或者使用媒体查询 media="print" 外链样式表。然后将无关元素隐藏,只将需要打印的内容展示出来;这时候需要专门写一套打印样式,页面修改,打印样式可能也需要修改,维护成本较高; 。

                        
                          <style>
  @media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>

                        
                      

2.将需要打印的元素复制到一个iframe中

需要遍历元素和所有子元素,克隆dom到新的iframe,关键技术点是要把样式完整复制过去; jquery.print.js; react-to-print 就是这样实现; 。

这种方案的好处是适用性强,缺点就是实现难度大; 。

3.打印页面设置

支持@page 来设置,同时支持 伪类 :left 、:right、:first 。

  1. :left设置多页打印的时候偶数页的配置;
  2. :right设置多页打印的时候奇数页的配置;
  3. :first 设置第一页的配置
页面宽度

打印常用的是A4纸,A4纸尺寸是21cm×29.7cm,在css中可以使用size属性设置 。

size属性设置页面大小和方向:

  1. 支持单独设置 A4、A3等 , 默认是纵向
  2. 支持单独portrait、landscape;纸张大小默认是关键词letter;
  3. 也支持 A4、A3 和 portrait、landscape关键词组合: A4 landscape;
  4. 也支持直接设置页面尺寸,比如:21cm 29.7cm,代表页面宽高分别为21cm和29.7cm
  5. 未设置size属性,可以在打印预览选择纸张大小和方向;设置之后就不能再选择了。
页面的边距
  1. margin属性设置页面的边距 : 不支持 em 和 ex;
  2. 默认的打印会带有页眉页脚。页眉包括日期、title,页脚包括链接和分页等信息。 可以通过 margin 设置边距达到隐藏页眉页脚的目的
                        
                          @page {
    margin: 3.7cm 2.6cm 3.5cm;  /* 上下左右边距 */
}
@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}
@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}
@page :first {
    size: A4 portrait;
    margin-left: 4cm;
    margin-right: 4cm;
}

/* 隐藏页眉 */
@page { margin-top: 0; }

/* 隐藏页脚 */
@page { margin-bottom: 0; }

                        
                      
使用绝对物理单位

使用pt、mm、cm等绝对单位 。

分页

打印的时候如果页面很长就会自动分页,我们希望分页不要把一些元素分开,可以给元素设置break-inside: avoid,

浏览器兼容性
  1. firefox
    1. 不支持size属性
    2. 可以在打印预览设置纸张和打印方向
  2. safari
    1. 不支持@page
    2. 可以在打印预览设置纸张和打印方向

调启打印预览

window.print() 、document.execCommand('print’) 、页面右键菜单打印、command+p 。

最后此篇关于浏览器打印方案的文章就讲到这里了,如果你想了解更多关于浏览器打印方案的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com