8

Internet Explorer 有Print Template engine，我可以在其中使用DEVICERECTelement 来表示物理页面，然后使用LAYOUTRECTelement 作为矩形视图将 HTML 文档流过页面并驱动分页。这可以防止行在相邻页面之间的中间被切断。此处详细介绍了此机制。

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

4

2 回答 2

12

浏览器引擎应该处理所有事情，您可以使用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;  }

避免段落内的分页符。

您甚至可以分别控制第一页、左页和右页的边距。

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

于 2013-10-18T10:00:28.407 回答
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);
    });
});

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

这是小提琴

代码取自这篇文章和这个页面。

于 2013-10-25T06:00:42.360 回答