我正在构建一个从数据生成pdf文件的工具,我需要构建两种格式：105mm * 148mm和105mm * 210mm.所以我得到了我的整个文件,现在是我插入分页符的时候了.我用一个简单的课程来做：
.page-break { display: block; page-break-before: always; }
现在我必须将这个类插入到我的v-for循环中.所以一个基本的想法是计算一个间隔,像每个索引是6的倍数,我插入一个.但这不是最好的方法,当内容超过90mm时,我想插入一个休息.
为了做到这一点,我想计算两个断点之间的距离,如果距离接近90mm,插入一个新的距离.但是,我找不到访问我的动态DOM元素的方法…
所以问题很简单：如何计算这个距离？或者如果有更好的方式来实现我的目标,我能改善什么？
解决方法
我相信你在每个v-for中添加一个div / component,你可以为每个div添加唯一的id.现在下面的方法可以给你一个div的高度,你将有一些方法将px转换为mm.
如果你使用jquery,你可以做
$('#nthDiv').height();
如果没有,您可以执行以下操作：
document.getElementById('#nthDiv').clientHeight;
document.getElementById('#nthDiv').offsetHeight;
如果您有以下代码：
<div v-for="(item,index) in items" :class="{'page-break': isBreakNeeded(index)}" :id="index + 'thDiv'">
///Your code
</div>
isBreakNeeded (index) {
var height = 0
do {
index -= 1;
height += document.getElementById('#' + index + 'thDiv').offsetHeight;
} while (index >= 0 || pageBreakAdded[index] == true)
if(height > threshold){
pageBreakAdded[index] = true
return true
}
else{
return false
}
}
您还需要在vue元素的data属性中添加以下哈希值,该元素将跟踪您添加分页符的索引：
pageBreakAdded: {}
