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
            })
    
          },
  • 相关阅读:
    用js实现广告图片后加载
    Sql server存储过程和C#分页类简化你的代码
    SQL Server 1069 错误(由于登录失败而无法启动服务)解决方法
    ASP.NET编程中的十大技巧
    ASP.NET通用分页程序
    asp.net中使用SPLIT这个函数把一个字符串分成数组
    win2003+iis6服务器设置问题集
    一个较优雅的GridView隐藏列取值解决方案
    ACCESS的iif语句转到SQL语句!!!
    SCOPE_IDENTITY 和 @@IDENTITY
  • 原文地址:https://www.cnblogs.com/mk2016/p/11984517.html
Copyright © 2011-2022 走看看