//html代码
<div id="demo">
<div class="jy-page">...</div>
</div>
//下载前处理的函数
renderOverpageClum () {
let demoHeight = $('#demo').height()
let pageWidth = $('#demo').width()
let pageHeight = pageWidth / 595.28 * 841.89 // 计算每页的高度
let pageNum = Math.ceil((demoHeight - 100)/(pageHeight - 100))
$('.jy-page').attr('style', 'height:'+pageHeight+'px;width:' + pageNum * pageWidth + 'px;column-count: '+pageNum+'');
var baseDom = $('.jy-page').eq(0)
console.log((demoHeight - 100)/(pageHeight - 100))
console.log(pageNum)
console.log('每页宽度:'+ pageWidth)
console.log('每页高度:'+ pageHeight)
if (pageNum > 1) {
for (var i = 1; i < pageNum; i++) {
$('#demo').append(baseDom.clone().css('left','-' + pageWidth * i + 'px'))
}
}
$('.table-item-first').each(function () {
if ($(this).text().length > 5) {
let pipHeight = $(this).height()
$(this).nextAll().height(pipHeight).css({'line-height':pipHeight + 'px'})
} else {
let pipHeight = $(this).height()
$(this).nextAll().height(pipHeight).css({'line-height':pipHeight + 'px'})
}
})
console.log('文档高度:'+ $('#demo').height())
}
//css样式
#demo {
min-width: 920px;
max-width: 1190px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.jy-page {
box-sizing: border-box;
column-gap:0px;
column-fill: auto;
padding: 50px 0;
position: relative;
}
handleDown() {
this.pod = true
this.$nextTick().then(() => {
this.renderOverpageClum()
htmlToPdf.downloadPDF(document.querySelector('#demo'), 'download')
this.resetClumStyle()
})
},
handlePreview() {
this.pod = true
this.$nextTick().then(() => {
$('.table-item-first').each(function () {
let pipHeight = $(this).height()
$(this).nextAll().height(pipHeight).css({'line-height':pipHeight + 'px'})
})
htmlToPdf.previewImg(document.querySelector('#demo')).then(res => {
this.previewUrl = res
})
this.previewImgShow = true
})
},