一个很奇葩的需求，页面切分，需要实现页面像word一样的动态切分，且插入页眉页脚，我觉得太难了，是否能实现都不能确定

Question

页面切分，像word一样排版。每页固定宽高 990 * 1400，需要截断并插入页眉页脚。
可能截断分页的地方有：

1. 段落刚还到页面尾部，需要切分分页。
2. table太长一页展示不了，需要中间截断。
3. ul表示的目录中间的截断。

求好的实现思路啊，奇葩的需求网上也是绝无仅有的。

Answer 1

hmmm，可以计算当前页面需要的页数n，搞n个iframe，每个iframe加载同样的页面，但是自动定位到不同的位置来模拟这个需求。。。
下面代码可以在当前页的控制台中执行

(()=>{
    try{document.getElementById("print-view").remove();}catch(e){}
    
    var pageHeight = 400;
    var pageWidth = 1024;
    
    var content = document.body.innerHTML;
    var bgColor = document.body.style.backgroundColor;
    var printViewContainer = document.createElement("div");
    printViewContainer.id="print-view";
    printViewContainer.style=`width:${pageWidth}`;
    document.body.appendChild(printViewContainer);
    printViewContainer.innerHTML = content;
    
    var totalHeight = printViewContainer.clientHeight;
    var totalPages = Math.ceil(printViewContainer.clientHeight * 1.0 / pageHeight);
    printViewContainer.innerHTML = "";

    printViewContainer.style=`background-color:#4e4e4e;position:absolute;width:${pageWidth+80}px;padding:40px;box-shadow:0 0 4px black;left:50%;margin-left:-${pageWidth/2}px;margin-top:20px;margin-bottom:20px;top:40px;z-index:100;`;
    for(let i=0;i<totalPages;i++){
        let div = document.createElement("div");
        let innerContainer = document.createElement("iframe");
        div.style = `margin:20px 10px;border:1px solid #9e9e9e;box-shadow:0 2px 3px gray;position:relative;overflow:hidden;height:${pageHeight}px;background-color:${bgColor};width:${pageWidth}px;`;
        let offsetTop = i * pageHeight;
        innerContainer.width = pageWidth;
        innerContainer.height = pageHeight;
        innerContainer.src = window.location.href;
        innerContainer.style="border:none;";
        innerContainer.scrolling = "no";
        if(pageHeight * i + pageHeight > totalHeight){
            innerContainer.height = totalHeight - pageHeight * i;
        }
        innerContainer.onload = function(){
            innerContainer.contentWindow.scrollTo(0,pageHeight * i);
        };
        div.appendChild(innerContainer);
        printViewContainer.appendChild(div);
    }
})();

Answer 2

直接写个word得了，或者把你们的内容转成word，直接在浏览器里查看

Answer 3

看着像pdf；
像pdf啊，word之类的东西，直接给个链接，链接到服务器地址，点击链接或者直接window.open("Path"),在浏览器中打开另外一个窗口查看就可以了。
这时候，就需要后端来处理了，你就只负责拿链接，显示就可以了。

Answer 4

如果你要导出分页的 PDF，倒可以参考我的这篇文章使用 Phantomjs 导出 PDF。如果你想实现自由在浏览器里这么做，可能还真有些麻烦。

Answer 5

请问解决了吗？我现在也遇到同样的需求了，如果已解决能否提供下思路和解决方案。邮箱：[e-mail]

Answer 6

大佬解决了吗？我也遇到一样的问题了，感觉太难了,如解决请提供一下解决方案，崩溃ing。邮箱：[e-mail]