浏览器打印长table时按页拆分

本文主要是介绍浏览器打印长table时按页拆分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

1. 浏览器中打印 高度未知的复杂table, 如果不做任何处理,使用 window.print() 打印 则打印中因为不存在断行. 多张纸中不美观. 需要按A4纸高度 拆分table的行进行打印

解决方案

1. 获取所有的行标签tr元素
2. 通过循环tr元素 和 getBoundingClientRect 获取 元素与整个table 左上角的距离
3. 如果距离高度超过了1页纸的高度 则直接在此tr元素前插入一个指定高度的div. 达到分页效果

基础知识

• 元素查找 document.querySelectorAll
• CSS 属性选择器
• CSS 中 px 与 cm 之间的换算关系
• Element.getBoundingClientRect 函数
• Node.insertBefore() 节点插入

function splitPage(config){let totalDom = document.getElementById('printDom'); // 需要打印的tableconst {insertDomHeight = '3cm',paperHeight = 29,printPageIds = [], // table元素id 支持多个table 同时打印. } = config;const onePageHeightPixes = Math.ceil(96 * paperHeight / 2.54);   // 一张纸 的高度(像素)// https://developer.mozilla.org/zh-CN/docs/Web/CSS/length  1cm = 96px / 2.54// A4纸 29.7cm 高const { top : totalTop, height : totalHeight  } = totalDom.getBoundingClientRect();let insertHeight = onePageHeightPixes;
for (let item of printPageIds) {const trList = document.querySelectorAll(`tr[data-tr-id*="${item}"]`);if (trList) {trList.forEach((x) => {const nodePosition = x.getBoundingClientRect();const { top, height } = nodePosition;const distance = top + height - totalTop; // 目标元素左下角相对于整个表单左上角的距离;if (distance > insertHeight) {const divHeight = top - insertHeight + height + insertDomHeight;console.log(divHeight);insertDiv(x, divHeight + 'px');insertHeight = insertHeight + onePageHeightPixes;}});}}}function insertDiv(dom, height = '5cm'){if (!dom) {return;}let parent = dom.parentNode;let newNode = document.createElement("div");newNode.style.height = height;parent.insertBefore(newNode, dom);
}

这篇关于浏览器打印长table时按页拆分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---