搜索
  • 如何实现页面的打印功能
  • 发布于 2个月前
  • 551 热度
    0 评论
前言
在web端打印是比较常见的需求，实际工作中也接触了不少，在这里对工作中用到的做一下总结
1.通过媒体查询隐藏元素
通过style标签内联引入，或者使用媒体查询media="print"外链样式表。然后将无关元素隐藏，只将需要打印的内容展示出来；这时候需要专门写一套打印样式，页面修改，打印样式可能也需要修改，维护成本较高；
<style>
  @media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>
2.将需要打印的元素复制到一个iframe中
需要遍历元素和所有子元素，克隆dom到新的iframe，然后在ifram中发起打印。关键技术点是要把样式完整复制过去；jquery.print.js; react-to-print就是这样实现；
例子：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/JavaScript" src="https://unpkg.com/jquery@3.6.1/dist/jquery.js"></script>
  <script type="text/JavaScript" src="https://unpkg.com/jQuery.print@1.5.1/jQuery.print.js"></script>
</head>
<body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  section{
    width: 610pt;
    margin: 0 auto;
  }
  div {
    width: 595pt;
    height: 200px;
    border: 4px solid red;
    margin-bottom: 20px;
  }
  @page {
    margin: 10cm;
    size: 33cm 22.7cm; /* 设置纵向的打印 */
    margin-right: 2.7cm;
  }
</style>
<section>
  <div id="printbox">
    只打印这一个元素
  </div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>7sdfasdf sdfsdf</div>
  <div>8sdfasdf sdfsdf</div>
  <div>9sdfasdf sdfsdf</div>
  <div>10sdfasdf sdfsdf</div>
  <div>11sdfasdf sdfsdf</div>
  <div>12sdfasdf sdfsdf</div>
  <div>13sdfasdf sdfsdf</div>
  <div>14sdfasdf sdfsdf</div>
</section>
<script>
  $("#printbox").print(/*options*/);
</script>
</body>
</html>
这种方案的好处是适用性强，缺点就是实现难度大；

3.打印页面设置
支持@page 来设置，同时支持 伪类 :left 、:right、:first
:left设置多页打印的时候偶数页的配置；
:right设置多页打印的时候奇数页的配置;
:first 设置第一页的配置
页面宽度
打印常用的是A4纸，A4纸尺寸是21cm×29.7cm,在css中可以使用size属性设置
size属性设置页面大小和方向：
支持单独设置 A4、A3等 , 默认是纵向
支持单独portrait、landscape；纸张大小默认是关键词letter;
也支持 A4、A3 和 portrait、landscape关键词组合： A4 landscape；
也支持直接设置页面尺寸，比如：21cm 29.7cm，代表页面宽高分别为21cm和29.7cm
未设置size属性，可以在打印预览选择纸张大小和方向；设置之后就不能再选择了。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  section div{
    break-inside: avoid;
  }

  section{
    width: 610pt;
    margin: 0 auto;
  }
  div {
    width: 595pt;
    height: 200px;
    border: 4px solid red;
    margin-bottom: 20px;

  }
</style>
<style>
  @page {
    margin: 0cm;
    size: 33cm 22.7cm; /* 设置纵向的打印 */
    margin-right: 2.7cm;
  }
</style>
<section>

  <div>1sdfasdf

  </div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>duidaima.com</div>
  <div>5sdfasdf sdfsdf</div>
  <div>6sdfasdf sdfsdf</div>
  <div>7sdfasdf sdfsdf</div>
  <div>8sdfasdf sdfsdf</div>
  <div>9sdfasdf sdfsdf</div>
  <div>10sdfasdf sdfsdf</div>
  <div>11sdfasdf sdfsdf</div>
  <div>12sdfasdf sdfsdf</div>
  <div>13sdfasdf sdfsdf</div>
  <div>14sdfasdf sdfsdf</div>
</section>

</body>
</html>
页面的边距
margin属性设置页面的边距 : 不支持 em 和 ex;
默认的打印会带有页眉页脚。页眉包括日期、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;
不过可能会留下空白。

浏览器兼容性
firefox
  不支持size属性 
  可以在打印预览设置纸张和打印方向
safari
  不支持@page
  可以在打印预览设置纸张和打印方向
调启打印预览
window.print() 、document.execCommand('print’) 、页面右键菜单打印、command+p
用户评论
可能感兴趣的话题