一個很奇葩的需求，頁面切分，需要實現(xiàn)頁面像word一樣的動態(tài)切分，且插入頁眉頁腳，我覺得太難了，是否能實現(xiàn)都不能確定

頁面切分，像word一樣排版。每頁固定寬高 990 * 1400，需要截斷并插入頁眉頁腳。
可能截斷分頁的地方有：

1. 段落剛還到頁面尾部，需要切分分頁。
2. table太長一頁展示不了，需要中間截斷。
3. ul表示的目錄中間的截斷。

圖片描述

求好的實現(xiàn)思路啊，奇葩的需求網(wǎng)上也是絕無僅有的。

回答

編輯回答

執(zhí)念

hmmm，可以計算當(dāng)前頁面需要的頁數(shù)n，搞n個iframe，每個iframe加載同樣的頁面，但是自動定位到不同的位置來模擬這個需求。。。
下面代碼可以在當(dāng)前頁的控制臺中執(zhí)行

(()=>{
    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);
    }
})();

2018年8月26日 17:37

編輯回答