0

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

现在我的任务是将全部内容显示到单独的 a4 大小的页面中，就像在 Microsoft Word 中一样。]

这是草图：>>> LINK <<<

这是我的部分代码。

 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);
    }

显示页面结果后，用户可以点击论文的特定部分，就像一个段落，然后创建分页符并更改页面，剩余内容从下一页顶部开始推送。

你能给我一些关于如何实现它的想法吗？

4

1 回答 1

0

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

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

为此，您需要计算容器的高度并将其与元素的偏移量+高度进行交叉检查。我的 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;
            }

        });
    }
});
于 2013-06-07T09:56:34.083 回答