documento impaginare HTML per la stampa con i browser basati su WebKit

Question

Internet Explorer ha Print Template motore, dove posso usare DEVICERECT elemento per rappresentare una pagina fisica, quindi utilizzare LAYOUTRECT elemento come vista rettangolare a scorrere il documento HTML tramite nella pagina e guidare l'impaginazione. Ciò impedisce alle linee di essere tagliate nel mezzo tra le pagine adiacenti. Questo meccanismo è descritto nei dettagli here.

WebKit offre funzionalità simili? In particolare, fa PhantomJS? Sto cercando qualcosa che permetta di impaginare un documento HTML esistente che non ha interruzioni di pagina predefinite, e vederlo impaginato come un nuovo documento HTML o PDF trasformato, senza linee tagliate al centro.

Answer 1

Il motore del browser deve occuparsi di tutto e puoi aiutarlo utilizzando un foglio di stile per media="print".

Ad esempio, per forzare le interruzioni di pagina in modo tale che ogni intestazione di livello 1 o 2 (<h1> o <h2>) viene posto all'inizio di un nuovo impiego pagina page-break-before:

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

In Chrome, IE & Opera vi in grado di controllare e widowsorphans, ma non è ancora sbarcato in WebKit, quindi per ora si può usare

p { page-break-inside: avoid; } 

per evitare interruzioni di pagina all'interno dei paragrafi.

È anche possibile controllare i margini per first, left and right pages separatamente.

Phantom's render() utilizza i fogli di stile per i supporti di stampa se l'output è un file pdf. L'esempio rasterize.js sembra una soluzione di stampa pronta per l'uso.

Answer 2

Questa funzione funziona correttamente.

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

Questo dividerà intera tabella in più sezioni ...

Here is fiddle

---

codice preso dal this article e this page.