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
            })
    
          },
  • 相关阅读:
    hdu 1108 最小公倍数
    hdu 1106 排序
    hdu 1097 A hard puzzle
    hdu 1076 An Easy Task
    hdu 1064 Financial Management
    hdu 1061 Rightmost Digit
    hdu 1050 Moving Tables
    hdu 1060 Leftmost Digit
    hdu 1049 Climbing Worm
    hdu1104
  • 原文地址:https://www.cnblogs.com/mk2016/p/11984517.html
Copyright © 2011-2022 走看看