Question

嗯，我甚至不确定这是否可以用我目前的方法来完成。我正在尝试将HTML文档的内容放入当前视口大小的页面中。我目前正在通过迭代所有文档的元素并检查它们的顶部偏移是否在当前页面的边界内，每当它不是时，这个偏移成为新页面的开始并且页面边界被设置为该偏移加上视口的高度。

我面临的问题是，通常会有一个元素（例如一个段落），其高度大于视口本身，所以即使算法将此元素放在新页面的开头，它的内容会溢出。我试图找到一种方法来分割这些元素，使第一个切片占据页面的剩余部分。

这带来了进一步的困难。即使我能找到一种方法来确定一个段落的文本仍然适合页面的其余部分，并且这本身已经证明是非常困难的，我仍然会遇到DOM在分割之后没有立即更新的问题。段落，这会弄乱下一页的计算，或者至少迫使我打破递归，这会使算法复杂化。

欢迎任何有关如何以第一个切片占用页面上剩余空间的方式拆分段落的建议。到目前为止，这是我的代码：

编辑： 值得注意的是，这只适用于没有绝对定位或浮动元素的非常简单的HTML。在我的情况下，这不是问题。

var elementIndex = -1;
var pages = 1;
var pageBoundary = 0;
var pageBreaks = [];

function calculatePages() {
    //first page boundary is window height
    pageBoundary = $(window).height();
    //do calculations
    iterateElements($("body"));
    //print results
    console.log(pageBreaks);
}

function iterateElements(parent) {

    $.each($(parent).children(), function(i, e) {
        //increase current element index
        elementIndex = elementIndex + 1;
        //get element's top offset
        var offsetTop = $(e).offset().top;
        //get the last position that the element occupies
        var elementSpan = offsetTop + $(e).outerHeight();

        if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks
            //element's start position is outside page boundary
            if (offsetTop >= pageBoundary) {
                //mark page start with red in order to visualize
                $(e).attr("style", "border-top: 1px solid red");

                //increase page count
                pages = pages + 1;
                //new page starts at element's top, next page boundary
                //is element's starting position plus the viewport's height
                pageBoundary = offsetTop + $(window).height();
                //store index of page break
                pageBreaks.push(elementIndex);
            }
            //element's start position is inside current page, but contents overflow
            else if (elementSpan >= pageBoundary) {
                //NO IDEA WHAT TO DO HERE
                //NEED A WAY TO SPLIT LARGE ELEMENTS
            }
        } 

        iterateElements(e);
    });
}

$(function() {
    calculatePages();
});

Answer 1

我做了类似的事情。我采取的方法是检查页面容器的高度。如果它大于最大值，我知道元素需要移动到下一页。

如果有多个元素，我可以将最后一个元素移动到下一页。

如果只有1个元素，则需要拆分。让我们调用这个元素X.所以你可以在下一页创建一个新的段落/部分，让我们调用那个元素Y.你现在可以将单词X的结尾处的单词或字符移动到元素Y的开头直到元素的高度X适合页面。

在此之后，您可以重复下一页。

Answer 2

您可以拥有索引文件并制作框架。我知道这是旧学校 - 但也许？

    <html>
    <head>
    <title>Example for Stackoverflow</title>
    </head>
    <frameset rows="28,*,0" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,150" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>

将HTML划分为页面，拆分长段落

2 个答案: