用于基于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文档

回答

相关问题