Question

我正在制作基于html-5的报告生成器。我创建了一个按钮来上传包含多个段落和表格的[HTML]页面，这是连续的。

现在我的任务是将所有内容显示为分开的a4大小的页面，就像在Microsoft Word中一样。]

这是草图：＆gt;＆gt;＆gt; LINK＆lt;＆lt;＆lt;

以下是我的代码的一部分。

 function xx (){

    var fi = document.getElementById('fi').files[0];          

        reader.onload = function (e){            
            var reader = new FileReader();                     
            var inner ="";
            inner  += this.result;

            inn.innerHTML ="<center><div class='bg' id='0'><div id='testmain'>"+inner+"</div></div></center>";

        }

        reader.onerror = function (e){
            dd.innerHTML = "error<br>";
        }
        reader.readAsText(fi);
    }

在显示页面结果后，用户可以单击纸张的特定部分，就像段落一样，然后创建分页并更改页面，其余内容将从下一页的顶部开始推送。

你能否告诉我一些如何实现它的想法？

Answer 1

不是使用评论作为聊天来表达我的建议，而是我的回答：

我曾经尝试做过这样的事情，回到html4。这是我使用的逻辑。创建一个具有您页面确切大小的div CONTENT（在边距和所有内容之后）将所有内容放入其中并循环显示其直接子项。如果当前孩子的底部低于他的父母，请将其和以下所有孩子一起放入新的div内容中。冲洗并重复。

为此，您需要计算容器的高度，并将其与元素的偏移量+高度进行交叉检查。我的vanillaJS有点生疏，因为浏览器细节和所有......所以我将使用jQuery显示逻辑，但大部分都可以很容易地用纯JS制作。代码将假设我们有一个div.page，它具有正确的CSS，使其完全符合内容页面的大小，并且不会调整大小到内容（溢出：隐藏），文档将包含所有div中的一个应该在页面中的内容......

$(document).ready(function(){
    var $page = $('div.page');
    var newPage = true;//To track if we loop
    while(newPage){
        newPage = false;
        $page.children().each(function(){
            if($(this).offset().top+$(this).outerHeight() > $page.offset().top+$page.height()){
                $page = $('<div>').addClass('page').appendTo('body');
                $(this).nextAll().appendTo($page);
                $(this).prependTo($page);//Don't forget the element too.
                newPage = true;
            }

        });
    }
});

HTML5 / JS - 上传的html页面的preProcess和模拟分页符

1 个答案: