场景：学生答题卡，每个答题框都要后台识别边框进行切图，单独拎出来给老师批改，所以答题框一旦被截断，后台就无法切图。
如图：

话不多说，直接上代码：

// 拿到页面上所有答题框 注意答题框与答题框之间的间距在后面循环时要加上，否则计算到后面就会出错
        let arr = document.querySelectorAll(".ider");
        // 第一页纸有所不同 有学生姓名以及二维码 所以第一次需要计算这个高度
        let newNum = document.querySelector(".iderBox").offsetHeight;
        // 循环页面上的所有答题框
        for (let i = 0; i < arr.length; i++) {
          // 加上间距 严谨点可以再加上边框
          newNum + arr[i].offsetHeight + 15;
          if ((newNum + arr[i].offsetHeight + 15) / arr[i].offsetWidth >= 1.3) {
            // 如果答题框的比例 大于或者等于一张a4纸的比例（1.3）
            // 那么就在上一个答题框上面加上类名 dataTest
            // 类名样式 dataTest: page-break-after:always; 强制让这个元素跳到下一页
            // 且初始化 newNum
            arr[i - 1].classList.add("dataTest");
            newNum = arr[i].offsetHeight + 120;
          } else {
            // 如果没有超过正常a4的比例就继续累加下一个答题框的高度和间距
            newNum += arr[i].offsetHeight + 15;
          }
        }

为啥要用比例的计算方式呢。不用比例的话 在不同的浏览器上分辨率不一样 计算会有误差 。最后上一下效果图：