前端/前端页面打印

前端页面打印踩坑

最近遇到了一个前端页面打印的需求：

1. 打印一个表单，用户可自定义选择需要打印的区域。

2. 每页纸只能打印 2 个表单，自动分页。

3. 可根据不同打印选项，部分元素的样式进行动态修改。

解决方案

1.CSS 通过媒体查询,在打印时生效,给元素绑定 css 类名以自定义想要的打印样式

@media print {
  .display-none {
    display: none;
  }
}

2.调用浏览器的打印方法

window.print();

3.此外，还可使用 js 的各种 dom 操作在点击打印时动态的修改部分打印样式。

document.getElementsByClassName("").classList.remove("");
document.getElementsByClassName("").classList.add("");
……

自动分页如何实现？

查阅资料发现 css 有两个属性 详见：w3school

通过数据源的下标判断奇偶，思考首尾元素的特殊情况……绑定 class 类名即可适应各种情况。

.a4 {
  page-break-before: always;
  page-break-after: always;
}