zoukankan      html  css  js  c++  java
  • 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;' + 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- 920px;
        max- 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
            })
    
          },
  • 相关阅读:
    iOS_03_为什么选择ios开发
    iOS_02_什么是ios开发
    iOS_01_什么是ios
    Hadoop之HDFS
    hadoop组件及其作用
    数组
    Scala基础知识(二)
    hadoop安装过程
    Scala基础知识
    建造者模式
  • 原文地址:https://www.cnblogs.com/mk2016/p/11984517.html
Copyright © 2011-2022 走看看