wes*_*ton 5 html printing page-break uiwebview ios
我正在生成一个多页html文档,我想从我的应用程序发送到Airprint打印机.每个页面都是离散的,必须从它自己的工作表开始.
这应该相对简单 - 每个页面的内容后面紧跟一个div元素.display: block; page-break-after: always; 这是一个简单的例子:
<html>
<head>
<title>Printing with Page Breaks</title>
<style type="text/css">
@media screen or print {
div.pageb { display: block; page-break-after: always; }
}
</style>
</head>
<body>
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet...</p>
<div class="pageb"></div> <!-- should page break here! -->
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet...</p>
<div class="pageb"></div> <!-- should page break here! -->
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet...</p>
<div class="pageb"></div> <!-- should page break here! -->
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这个文档可以完美地从Safari和Chrome打印出来,它们都将所有分页符都放在了应有的位置.但是,在iOS上,不插入分页符.
要打印我使用的HTML UIPrintInteractionController打印的内容UIWebView的方式UIViewPrintFormatter.像这样的东西:
UIPrintInteractionController *controller = [UIPrintInteractionController sharedPrintController];
UIPrintInfo *printInfo = [UIPrintInfo printInfo];
printInfo.outputType = UIPrintInfoOutputGeneral;
controller.printInfo = printInfo;
UIWebView *webViewPrint = [[UIWebView alloc] init];
[webViewPrint loadHTMLString:printHTML baseUrl:@"/"];
UIViewPrintFormatter *viewFormatter = [webViewPrint viewPrintFormatter];
controller.printFormatter = viewFormatter;
controller.showsPageRange = NO;
[controller presentAnimated:YES completionHandler:completionHandler];
Run Code Online (Sandbox Code Playgroud)
这一切似乎非常标准,我想知道为什么分页符在其他Webkit浏览器上正确打印而不是UIWebView.关于如何在iOS上进行分页符的任何想法?
我没有一般的解决方案,但我确实设法在一些摆弄后让分页符有效.看起来像UIWebView有点挑剔,page-break-before/page-break-after可以在哪里应用.从这个问题中得到一个提示,我决定尝试将我的分页符样式添加到h1元素中而不是divs出乎意料地出现了分页符.这是现在的样子:
<style type="text/css">
@media print {
.pagebreak-before:first-child { display: block; page-break-before: avoid; }
.pagebreak-before { display: block; page-break-before: always; }
}
</style>
Run Code Online (Sandbox Code Playgroud)
...
<body>
<h1 class="pagebreak-before">Page 1</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h1 class="pagebreak-before">Page 2</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h1 class="pagebreak-before">Page 3</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Run Code Online (Sandbox Code Playgroud)
我还添加了一个.pagebreak-before选择器的副本,现在有一个:first-child伪元素.这是为了防止文档开头的空白页.