【问题标题】:How to dynamically check remaining page height in PDFMake?如何动态检查 PDFMake 中的剩余页面高度?
【发布时间】:2016-06-05 09:03:59
【问题描述】:

有没有办法在 PDFMake 中动态检查剩余页面高度?动态创建页面时,我希望能够检查剩余的可用页面高度以将其与元素高度进行比较,以便页面上的最后一个元素(例如图像或长文本区域内容)无法被剪切但被转移到另一个页面反而。不知道怎么动态做。

【问题讨论】:

    标签: pdfmake


    【解决方案1】:

    谢谢大家。我最后使用了 pageBreakBefore 函数,以及我用作标记的 headerLevel,并找到了一个 pdfmake 版本,它允许我们查看节点是否为图像,从而计算元素的高度。 这是它在我的代码中的外观。那里还有一个页脚,必须在计算中考虑它,以免内容出现在上面:

    pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
              var pageInnerHeight = currentNode.startPosition.pageInnerHeight;
              var top = (currentNode.startPosition.top) ? currentNode.startPosition.top : 0;
              var footerHeight = 30;
              var nodeHeight = 0;
              if (followingNodesOnPage && followingNodesOnPage.length) {
                nodeHeight = followingNodesOnPage[0].startPosition.top - top;
              }
    
              if (currentNode.headlineLevel === 'footer') return false;
    
              return (currentNode.image && (top + nodeHeight + footerHeight > pageInnerHeight))
                  || (currentNode.headlineLevel === 'longField' && (top + nodeHeight + footerHeight > pageInnerHeight))
                  || currentNode.startPosition.verticalRatio >= 0.95;
            }
    

    【讨论】:

    • 我有动态内容,不知道怎么用pageBreakBefore你能帮我吗?这是我的问题的链接。 stackoverflow.com/questions/45096504/…
    • 在您的链接中查看我的答案。
    • var pageInnerHeight = currentNode.startPosition.pageInnerHeight; var top = (currentNode.startPosition.top) ? currentNode.startPosition.top:0;非常感谢。
    【解决方案2】:

    好吧,我可能有点晚了。但是在 0.1.17 版本中,他们引入了 pageBreakBefore 功能。

    Release Notes on Github

    您现在可以指定 pageBreakBefore 函数,该函数可以确定是否应在分页符之前插入分页符。要实现“没有孤儿”规则,可以这样:

    var dd = {
      content: [
        {text: '1 Headline', headlineLevel: 1},
        'Some long text of variable length ...',
        {text: '2 Headline', headlineLevel: 1},
        'Some long text of variable length ...',
        {text: '3 Headline', headlineLevel: 1},
        'Some long text of variable length ...',
      ],
      pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
        return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
      }
    }
    

    如果 pageBreakBefore 返回 true,则会在 currentNode 之前添加分页符。当前节点附有以下信息:

    {
     id: '<as specified in doc definition>', 
     headlineLevel: '<as specified in doc definition>',
     text: '<as specified in doc definition>', 
     ul: '<as specified in doc definition>', 
     ol: '<as specified in doc definition>', 
     table: '<as specified in doc definition>', 
     image: '<as specified in doc definition>', 
     qr: '<as specified in doc definition>', 
     canvas: '<as specified in doc definition>', 
     columns: '<as specified in doc definition>', 
     style: '<as specified in doc definition>', 
     pageOrientation '<as specified in doc definition>',
     pageNumbers: [2, 3], // The pages this element is visible on (e.g. multi-line text could be on more than one page)
     pages: 6, // the total number of pages of this document
     stack: false, // if this is an element which encapsulates multiple sub-objects
     startPosition: {
       pageNumber: 2, // the page this node starts on
       pageOrientation: 'landscape', // the orientation of this page
       left: 60, // the left position
       right: 60, // the right position
       verticalRatio: 0.2, // the ratio of space used vertically in this document (excluding margins)
       horizontalRatio: 0.0  // the ratio of space used horizontally in this document (excluding margins)
     }
    }
    

    【讨论】:

      【解决方案3】:

      我最近在一次开发大会上与一位同事交谈。他们面临同样的问题。如果你真的需要知道,据我所知有两种可能性:

      1) 测试渲染页面数据并检查输出是否超过一页。这是 derpy,但你不知道内部结构。

      2) 在生成 pdf 之前,请自行在 pdfmake 中进行计算。不幸的是,关于如何您需要查看 pdfmake 生成代码本身。

      如果有更优雅的解决方案我非常想了解自己!

      【讨论】:

        【解决方案4】:

        我是手动做的。在文本开始出现之前,您只需要知道页面的最大大小是多少。就我而言,Legal 纸张大小在文本被截断之前的最大宽度为 700 像素。

        所以我要做的是减少循环中的列宽,直到 totalPageWidth 小于可接受的宽度。 它可能不是很可读,但这里是代码。

        // For a legal size page, total width is 700. So try and push all columns within 700
                // Following lines are there to reduce the width of columns so as to adjust the total width.
                // Width is deducted for every column so as not to affect any individual column.
                totalOutOfPageWidth = totalWidth - 700;
                var totalWidthDeducted = 0;
                while (totalOutOfPageWidth > 0) {
                    for (var c = 0; c < colWidthArray.length; c++) {
                        if (totalOutOfPageWidth > 0) {
                            if (colWidthArray[c] == width70 - totalWidthDeducted) {
                                colWidthArray[c] = colWidthArray[c] - 5;
                                totalOutOfPageWidth -= 5;
                            }
                        }
                    }
                    if (totalOutOfPageWidth > 0) {
                        for (var c = 0; c < colWidthArray.length; c++) {
                            if (colWidthArray[c] == width50 - totalWidthDeducted) {
                                colWidthArray[c] = colWidthArray[c] - 5;
                                totalOutOfPageWidth -= 5;
                            }
                        }
                    }
                    if (totalOutOfPageWidth > 0) {
                        for (var c = 0; c < colWidthArray.length; c++) {
                            if (colWidthArray[c] == width35 - totalWidthDeducted) {
                                colWidthArray[c] = colWidthArray[c] - 5;
                                totalOutOfPageWidth -= 5;
                            }
                        }
                    }
                    if (totalOutOfPageWidth > 0) {
                        for (var c = 0; c < colWidthArray.length; c++) {
                            if (colWidthArray[c] == width25 - totalWidthDeducted) {
                                colWidthArray[c] = colWidthArray[c] - 5;
                                totalOutOfPageWidth -= 5;
                            }
                        }
                    }
                    totalWidthDeducted += 5;
        

        【讨论】:

        • 这段代码在哪里使用?是在 pageBreakBefore() 内还是在生成表格之前计算?
        • 表格生成前。
        猜你喜欢
        • 1970-01-01
        • 2013-07-16
        • 1970-01-01
        • 1970-01-01
        • 2017-06-30
        • 2011-11-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多