关于如何解决网页打印内容截断问题

1、前言

在前端开发中，有时候一些业务场景中，我们有需求要实现打印功能，在打印过程中，会有可能出现内容在分页处被截断的问题。

2、问题描述

• 应用场景：在各种工厂，仓库，erp系统中，有需要打印当前页面上的表单(如：电子检验单、出厂检验记录、动拉力报告）用于存档等各种实际用途。

• 问题：表格被截断，文字被截断，图片截断。

3、解决方案

使用CSS page-break-inside防止打印时内容被截断，基本上，大部分情况下都可以解决。

CSS 属性 page-break-inside 表示元素框内是否允许分页符。

CSS 属性 page-break-before 和 page-break-after 帮助我们定义文档在打印时的行为。

4、用法

page-break-inside: auto | avoid | initial | inherit;

5、说明

值	描述
auto	在需要时自动插入分页符的默认值。
avoid	它用于尽可能避免元素内的分页符。
initial	它将属性设置为其默认值。
inherit	如果指定了该值，则相应元素使用其父元素 page-break-inside 属性的计算值。

6、注意

不能用于绝对定位的元素或不生成框的空 <div> 元素