Sayfalara ayırma HTML belgesi

Question

Internet Explorer ben sayfasına içinden HTML belgesini akmaya sonra dikdörtgen görünüm olarak LAYOUTRECT eleman kullanmak, fiziksel bir sayfayı temsil etmek DEVICERECT eleman kullanabilirsiniz Print Template motor vardır ve sayfalandırmayı yönlendir. Bu, bitişik sayfalar arasında satırların kesilmesini önler. Bu mekanizma detayları here'da açıklanmaktadır.

WebKit benzer bir özellik sunuyor mu? Özellikle, PhantomJS yapar? Önceden tanımlanmış sayfa kırılmalarına sahip olmayan mevcut bir HTML belgesine sayfa açmaya izin verecek bir şey arıyorum ve satırları kesilmeksizin yeni dönüştürülmüş bir HTML veya PDF belgesi olarak paginated olarak görüntüledim.

Answer 1

Tarayıcı motoru her şeyin üstesinden gelmeli ve media="print" için bir stil sayfası kullanarak yardımcı olabilirsiniz.

sayfa sonlarını zorlamak için Örneğin

böyle seviye 1 veya 2 (<h1> veya <h2>) her başlık yeni bir sayfa kullanım page-break-before başında yerleştirildiğini: Chrome'da

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

IE & Opera sen widows ve orphans kontrol edebilirsiniz, ama şimdilik paragraflar içindeki sayfa sonlarını önlemek için

p { page-break-inside: avoid; } 

kullanabilirsiniz yüzden, henüz WebKit indi değil.

first, left and right pages için kenar boşluklarını ayrı ayrı kontrol edebilirsiniz.

Yankı render()10 Çıktı bir pdf dosyasıysa, yazdırma ortamı için stil sayfalarını kullanır. rasterize.js örnek, kullanıma hazır bir yazdırma çözümüne benziyor.

Answer 2

Bu işlev düzgün çalışıyor.

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

Bu çoklu bölüme tüm tabloyu bölecek ...

Here is fiddle

---

Kod this article ve this page alınan.