如何使用 iOS 打印分页符？答案

【问题标题】：How do you print page breaks with iOS?如何使用 iOS 打印分页符？
【发布时间】：2013-09-10 00:31:26
【问题描述】：

我正在生成一个多页 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>

此文档可从 Safari 和 Chrome 完美打印，它们都将所有分页符放在应有的位置。然而，在 iOS 上，不会插入分页符。

要打印 html，我使用 UIPrintInteractionController 通过 UIViewPrintFormatter 打印 UIWebView 的内容。像这样的：

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];

这一切看起来都很标准，我想知道为什么分页符在其他 Webkit 浏览器上正确打印，但在 UIWebView 上却没有。关于如何在 iOS 上进行分页的任何想法？

【问题讨论】：

标签： html ios printing uiwebview page-break

【解决方案1】：

我没有通用的解决方案，但经过一番摆弄后，我确实设法让分页符正常工作。似乎 UIWebView 对可以应用page-break-before/page-break-after 的位置有点挑剔。从this question 得到提示，我决定尝试将我的分页符样式添加到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>

...

<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>

我还添加了 .pagebreak-before 选择器的副本，现在有一个 :first-child 伪元素。这是为了防止文档开头出现空白页。

【讨论】：

【解决方案2】：

我很确定问题不在于 h1 与 div。但是当在内容之前使用元素并使用 page-break-before: always 时，它确实工作得更好。

首先我尝试了这样的事情：

<div class="page">
    <h2>Header</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Header</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Header</h2>
    <p>Content</p>
</div>

还有css：

.page { page-break-after: always; }

这给了我非常奇怪的分页符，并且标题可能是页面上唯一垂直居中的元素。

将标记更改为：

<div class="page">
    <div class="break"></div>
    <h2>Header</h2>
    <p>Content</p>
</div>
<div class="page">
    <div class="break"></div>
    <h2>Header</h2>
    <p>Content</p>
</div>
<div class="page">
    <div class="break"></div>
    <h2>Header</h2>
    <p>Content</p>
</div>

而 css 到：

.break { page-break-before: always; }
.page:first-child .break { page-break-before: avoid; }

按预期工作。

【讨论】：

【解决方案3】：

我发现我必须将我的UIWebView 的paginationMode 属性设置为UIWebPaginationModeTopToBottom（或除默认UIWebPaginationModeUnpaginated 值之外的任何其他值）才能使用CSS 分页规则。

【讨论】：