打印HTML页面，表格元素被截断的解决方案

abstract：

获取页面中所有的table元素，计算table元素前的所有dom元素的高度，如果超出了当前可视容器的高度，那么就进行分割操作。

reference：

Window：load 事件 - Web API 接口参考 | MDN

HTML DOM Element nextSibling 属性

Q：

我的问题是：我要做一个打印HTML页面功能，这个页面的表格是动态生成的，具有多个表格，现在面临的问题是，在第一页末尾无法放下这一整个表格，如何做到将这个表格分割为两部分，第一部分占满第一页剩余的空间，第二部分放在第二页去。

这个表格是动态生成的，我无法确定从第几行分割?

A:

如果表格是动态生成的，并且你无法确定从第几行进行分割，那么就需要在生成表格时根据页面的可视高度来进行分割。

你可以使用JavaScript来获取页面的可视高度，并在生成表格时判断每个表格所占高度。当表格的高度超过页面可视高度时，就将剩余部分放在下一页打印。

Q:

你的方法是有效的，但是需要做出一些调整，

var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

你直接获取了整个可视高度，但是这个表格之前的元素你忘记考虑了. 并且 “计算表格之前元素的高度” 不是指表格上半部分的高度，而是指表格之前其他dom元素的高度

A:

你是希望计算表格之前其他 DOM 元素的高度，而不仅仅是表格上半部分的高度。

以下是经过修改的代码，以考虑表格之前其他 DOM 元素的高度：

现在，代码会将表格之前其他 DOM 元素的高度累加，并与表格高度一起比较来决定是否需要对表格进行分割。

Q:

你的答案是正确的，我现在有一个附加的需求，让所有的表格都自适应宽度。我的要求是，对于所有的table元素，我希望宽度自适应，并且里面的每个单元格都是平均分配宽度的

A:

Q:在页面上确实是平均分配了宽度，但是为什么打印时候没有这个效果？

A:在 CSS 中，通过 @media print 媒体查询可以设置打印样式，以及将其与屏幕样式分开。您可以在 @media print 媒体查询中重新设置表格的宽度和单元格的宽度，以确保在打印时也能保持相同的效果。

通过将 display 属性从 block 修改为 table，您应该能够在打印时保持表格的自适应宽度效果。