Question

如果我需要在文档中强制分页，我试图用javascript识别。

隐藏溢出的一个元素。我遍历本文档中的每个元素。我删除所有最后一个孩子，直到overflow：hidden元素中的元素的高度更小。现在我知道，什么时候分页，我会在新页面中推送所有删除的孩子。

在浏览器中正常工作。但不是PDF格式......

我正在使用http://wkhtmltopdf.org/

在此处查看问题：Left: PDF, Right: Browser (Chrome)

高度为3262px对358px ......

如果我使用.clientHeight或jQuery .height（）。

有没有人知道解决方法才能达到同样的效果？

一些代码：

    function isOverflowed(element){
        // return element.scrollHeight > element.clientHeight;
        // console.log(element.clientHeight);
        // console.log(element.parent().height() +'>'+ element.height());
        return element.parent().height() < element.height();
    }
    // var daysWrapper = document.getElementById('days');
    // var days = daysWrapper.querySelectorAll(".section.day");
    var days = $('#days .section.day');
    // console.log(days);

    days.each(function() {
      var $this = $(this);
      var area = $this.find('.day-info');
      var content = area.children();
      var lasts = $( '<div class="lasts">' );
      var test = 0;
      while(isOverflowed(content)) {
        var last  = content.children().last();
        // lasts.append( $( last ) );
        last.clone().prependTo(lasts);
        last.remove();
        test++;
        if (test > 6) break;
      }
      content.find('h1').html(area.height() + ' - ' + content.height());
      if (lasts.children().length ) {
        var newPage = $this.clone();
        newPage.insertAfter($this);
        newPage.find('.day-image').remove();
        newPage.find('.day-info').removeClass('overflow');
        newPage.find('.day-info').children().html(lasts.html());
      }
    });

谢谢！

PDF中元素的clientHeight与浏览器中的元素

0 个答案: