用於基於WebKit的瀏覽器打印拼版HTML文檔

Internet Explorer具有Print Template發動機，其中I可以使用DEVICERECT元素來表示一個物理頁，然後使用LAYOUTRECT元件爲矩形視圖通過對流動的HTML文檔到頁並驅動分頁。這樣可以防止相鄰頁面中間的線段被切斷。該機制詳細描述在here。用於基於WebKit的瀏覽器打印拼版HTML文檔

WebKit是否提供了類似的功能？具體來說，PhantomJS呢？我正在尋找任何可以對現有HTML文檔進行分頁處理的方法，該文檔沒有預定義的分頁符，並將其分頁爲新的轉換後的HTML或PDF文檔，而不會在中間切斷行。

來源

2013-10-08 Noseratio

密切相關：http://stackoverflow.com/questions/3636052/html-book-like-pagination –

瀏覽器引擎應該處理所有事情，您可以使用樣式表來幫助它，爲media="print"。

例如強制分頁符如1級或2（<h1>或<h2>）的每一個標題被放置在一個新的頁面使用page-break-before的開頭：

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

在Chrome中，IE &歌劇你可以控制widows和orphans，但它並沒有在WebKit的還沒有登陸，所以現在你可以使用

p { page-break-inside: avoid; }

避免段內分頁符。

您甚至可以單獨控制邊距first, left and right pages。

幻影的render()使用樣式表打印媒體，如果輸出是pdf文件。 rasterize.js示例看起來像一個即可使用的打印解決方案。

來源

2013-10-18 10:00:28 pawel

+1。媒體查詢和css3分頁規則是我在使用wkpdftohtml時處理PDF和打印的方式。它往往在最近的瀏覽器/引擎和某些類型的元素中更可靠地工作，但是如果您控制渲染引擎版本並且不依賴於客戶端，那麼這不是問題。他們是非常有用的規則，所以這是一個恥辱的瀏覽器已經拖着他們的支持。 – SpliFF

此功能正常工作。從this article和this page採取

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

這將整個表分割成多個部分...

Here is fiddle

代碼。

來源

2013-10-25 06:00:42

用於基於WebKit的瀏覽器打印拼版HTML文檔

回答

相關問題