html2canvas转pdf分页隔断问题处理
//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 }) },