8

Internet Explorer にはPrint Template engineがあり、要素を使用DEVICERECTして物理ページを表し、LAYOUTRECT要素を長方形のビューとして使用して、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 では未亡人と孤児を制御できますが、WebKit にはまだ組み込まれていないため、今のところ使用できます。

p { page-break-inside: avoid;  }

段落内の改ページを避けるため。

最初のページ、左ページ、右ページの余白を個別に制御することもできます。

render()出力が pdf ファイルの場合、Phantom'sは印刷メディアにスタイルシートを使用します。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 に答える