Paginierung HTML-Dokument für das Drucken mit WebKit-basierten Browsern

Question

Internet Explorer hat Print Template Motor, wo ich DEVICERECT Element verwenden, um eine physikalische Seite zu repräsentieren, dann LAYOUTRECT Element als rechteckige Ansicht verwenden Sie das HTML-Dokument durch in der Seite zu fließen und fahren Sie die Paginierung. Dies verhindert, dass Zeilen in der Mitte zwischen benachbarten Seiten abgeschnitten werden. Dieser Mechanismus wird ausführlich beschrieben here.

Bietet WebKit eine ähnliche Funktion? Insbesondere tut PhantomJS? Ich suche nach etwas, das erlauben würde, ein existierendes HTML-Dokument zu paginieren, das keine vordefinierten Seitenumbrüche hat, und es paginiert als ein neues transformiertes HTML- oder PDF-Dokument anzusehen, ohne dass Zeilen in der Mitte abgeschnitten werden.

Answer 1

Die Browser-Engine sollte sich um alles kümmern und Sie können es mit einem Stylesheet für media="print" unterstützen.

Zum Beispiel Seitenumbrüche zu zwingen, so dass jede Position der Stufe 1 oder 2 (<h1> oder <h2>) am Beginn einer neuen Seite Verwendung page-break-before gelegt:

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

In Chrome, IE & Opera Sie Steuerung widows und orphans können, aber es hat in WebKit noch nicht gelandet, so jetzt Sie

p { page-break-inside: avoid; } 

zu vermeiden Seitenumbrüche innerhalb von Absätzen verwenden könnten.

Sie können sogar die Ränder für first, left and right pages separat steuern.

Phantoms render() verwendet Stylesheets für Druckmedien, wenn die Ausgabe eine PDF-Datei ist. rasterize.js Beispiel sieht wie eine gebrauchsfertige Drucklösung aus.

Answer 2

Diese Funktion funktioniert gut.

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

Das wird gesamte Tabelle in mehrere Abschnitte aufgeteilt ...

Here is fiddle

---

-Code von this article und this page genommen.