[JavaScript知识库]浏览器打印长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'); // 需要打印的table
  const {
    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);
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖