场景:学生答题卡,每个答题框都要后台识别边框进行切图,单独拎出来给老师批改,所以答题框一旦被截断,后台就无法切图。
如图:
话不多说,直接上代码:
// 拿到页面上所有答题框 注意答题框与答题框之间的间距在后面循环时要加上,否则计算到后面就会出错
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;
}
}
为啥要用比例的计算方式呢。不用比例的话 在不同的浏览器上分辨率不一样 计算会有误差 。最后上一下效果图: