我正在构建一个从数据生成pdf文件的工具，我需要构建两种格式:105mm*148mm和105mm*210mm.所以我拿到了整个文档，现在是时候插入分页符了.我用一个简单的类来做:
.page-break { display: block; page-break-before: always; }
现在我必须将这个类插入到我的v-for循环中.所以一个基本的 idea 是计算一个区间，就像每个区间，指数是6的倍数，我插入一.但这不是最好的方法，我想在内容超过90毫米时插入一个中断.
为了做到这一点，我想计算两个断点之间的距离，如果距离接近90mm，则插入一个新的断点.但是，我找不到访问动态DOM元素的方法...
所以问题很简单:如何计算这个距离？或者，如果有更好的方法来实现我的目标，我可以改进什么？
我相信你在每个v-for中添加了一个div/组件，你可以 for each div添加一个唯一的id.下面的方法可以为你提供px中一个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: {}