Javascript 为HTML文档分页，以便使用基于WebKit的浏览器进行打印

Internet Explorer有一个engine，在这里我可以使用

DEVICERECT

元素来表示一个物理页面，然后使用

LAYOUTRECT

元素作为一个矩形视图，将HTML文档流到页面中并驱动分页。这防止了在相邻页面中间的线被切断。详细描述了该机制

---

WebKit是否提供了类似的功能？具体来说，PhantomJS是否提供了类似的功能？我正在寻找任何允许对没有预定义分页符的现有HTML文档进行分页的方法，并将其作为新转换的HTML或PDF文档进行分页，而不在中间截断行。

浏览器引擎应该处理所有事情，您可以使用

media=“print”的样式表来辅助它

例如，强制分页符，以便将级别1或2（

或

）的每个标题放置在新页面的开头，请使用：

在Chrome、IE和Opera中，您可以控制和，但它还没有登陆WebKit，所以现在您可以使用

p { page-break-inside: avoid;  } 

避免段落内出现分页符

您甚至可以单独控制页边距

---

Phantom的

render（）

在输出为pdf文件时使用打印介质的样式表。该示例看起来像一个现成的打印解决方案。

此功能运行良好

$(function () {
    $("#print-button").on("click", function () {
        var table = $("#table1"),
            tableWidth = table.outerWidth(),
            pageWidth = 600,
            pageCount = Math.ceil(tableWidth / pageWidth),
            printWrap = $("<div></div>").insertAfter(table),
            i,
            printPage;
        for (i = 0; i < pageCount; i++) {
            printPage = $("<div></div>").css({
                "overflow": "hidden",
                "width": pageWidth,
                "page-break-before": i === 0 ? "auto" : "always"
            }).appendTo(printWrap);
            table.clone().removeAttr("id").appendTo(printPage).css({
                "position": "relative",
                "left": -i * pageWidth
            });
        }
        table.hide();
        $(this).prop("disabled", true);
    });
});

$（函数（）{
$（“#打印按钮”）。在（“单击”上，函数（）{
变量表=$（“#表1”），
tableWidth=table.outerWidth（），
页面宽度=600，
pageCount=Math.ceil（表宽/页宽），
printWrap=$（“”）。在（表）后面插入，
我
打印页；
对于（i=0；i

这将把整个表拆分为多个部分

---

---

代码取自和。

+1。媒体查询和css3分页符规则是我在使用wkpdftohtml时处理PDF和打印的方式。它在最新的浏览器/引擎中以及在某些类型的元素中工作更可靠，但是如果您控制渲染引擎的版本并且不依赖于客户端，那么这就不是问题。它们是非常有用的规则，因此浏览器在支持上拖后腿是很遗憾的。密切相关：

$(function () {
    $("#print-button").on("click", function () {
        var table = $("#table1"),
            tableWidth = table.outerWidth(),
            pageWidth = 600,
            pageCount = Math.ceil(tableWidth / pageWidth),
            printWrap = $("<div></div>").insertAfter(table),
            i,
            printPage;
        for (i = 0; i < pageCount; i++) {
            printPage = $("<div></div>").css({
                "overflow": "hidden",
                "width": pageWidth,
                "page-break-before": i === 0 ? "auto" : "always"
            }).appendTo(printWrap);
            table.clone().removeAttr("id").appendTo(printPage).css({
                "position": "relative",
                "left": -i * pageWidth
            });
        }
        table.hide();
        $(this).prop("disabled", true);
    });
});