题目：用window.print()实现打印，并防止内容截断

首先，我们要先了解一些关于print内容的基础内容

1、先来查看window.print()方法的使用：

以上部分可看出window.print不接收参数，并且无返回，所以我们暂且可以将其看成一个同步执行方法，在打印机被调用的时候，window.print()方法之后的js代码是阻塞的。直到window.print()方法执行完成，之后的js才会继续执行。

2、如果就非要明确打印前以及打印后的事件呢？

beforeprint事件： afterprint事件： window.print()在执行前或者执行后的一些操作，可以放到监听中执行。

3、打印的样式要如何添加

media="print",添加此属性，这段print.css只会在打印中生效。

<link href="/print.css" media="print" rel="stylesheet" />

@media print 中的内容只在打印中生效

@media print {
  /* 你所有打印的样式都放在这里 */
}

4、css分页属性

.page_break {
page-break-before: always; //在这之前分页
page-break-after: always;//在这之后分页
}

其他更多配置可查：打印css相关属性。

实现思路

以A4为例子：

获取到每个竖着占位的含有自定义属性needPrint元素：

<div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
<div needPrint></div>
</div>

.page_break{
page-break-after: always;
}

const GetNeedPrint = () => {
  const printDomlist = document.querySelectorAll('[needPrint]')
  let a4Height = 841
  let height = 0
  for (let i = 0; i < printDomlist.length; i++) {
    const item = printDomlist[i]
    if (height > a4Height) {
      item.classList.add('print_dom_after')
      height = 0
    }
    const itemMargin = getComputedStyle(item)['margin-top'].split('px')[0] * 1
    height += (item.offsetHeight + itemMargin) 
  }
 window.print()
}

实际情况实际分析，打印页面会存在缩放的需求，zoom为高度缩放比例

const GetNeedPrint = (zoom=1) => {
  const printDomlist = document.querySelectorAll('[needPrint]')
  let a4Height = 841
  let height = 0
  for (let i = 0; i < printDomlist.length; i++) {
    const item = printDomlist[i]
    if (height > a4Height) {
      item.classList.add('print_dom_after')
      height = 0
    }
    const itemMargin = getComputedStyle(item)['margin-top'].split('px')[0] * 1
    height += (item.offsetHeight + itemMargin) * zoom
  }
 window.print()
}

如此就能完美实现打印分页需求啦👏👏👏！

文章到这里就结束啦，若有更好的方式欢迎各位大佬指教，感谢大家阅读🌹🌹🌹。

如何用window.print()实现打印分页🥹