为使用基于 WebKit 的浏览器打印的 HTML 文档分页答案

【问题标题】：Paginating HTML document for printing with WebKit-based browsers为使用基于 WebKit 的浏览器打印的 HTML 文档分页
【发布时间】：2013-10-15 10:56:18
【问题描述】：

Internet Explorer 有Print Template 引擎，我可以在其中使用DEVICERECT 元素来表示物理页面，然后使用LAYOUTRECT 元素作为矩形视图将HTML 文档流入页面并驱动分页。这可以防止行在相邻页面之间的中间被切断。这个机制在here有详细描述。

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

【问题讨论】：

密切相关：stackoverflow.com/questions/3636052/html-book-like-pagination

标签： javascript html printing webkit phantomjs

【解决方案1】：

浏览器引擎应该处理所有事情，您可以使用media="print" 的样式表来帮助它。

例如，要强制分页，以便将第 1 级或第 2 级（<h1> 或 <h2>）的每个标题放在新页面的开头，请使用 page-break-before：

h1, h2 { page-break-before:always; }

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

p { page-break-inside: avoid;  }

避免段落内出现分页符。

您甚至可以单独控制first, left and right pages 的边距。

如果输出是 pdf 文件，Phantom 的 render() 将样式表用于打印媒体。 rasterize.js 示例看起来像是一个现成的打印解决方案。

【讨论】：

+1。媒体查询和 css3 分页规则是我在使用 wkpdftohtml 时处理 PDF 和打印的方式。它往往在最近的浏览器/引擎和某些类型的元素中更可靠地工作，但如果您控制渲染引擎版本并且不依赖于客户端，那不是这样的问题。它们是非常有用的规则，所以很遗憾浏览器一直在支持。

【解决方案2】：

此功能运行良好。

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

这会将整个表格分成多个部分...

Here is fiddle

代码取自 this article 和 this page。

【讨论】：