Question

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

这一切看起来非常标准，我想知道为什么分页符在其他Webkit浏览器上正常打印而不是UIWebView。关于如何在iOS上进行分页符的任何想法？

Answer 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伪元素。这是为了防止文档开头出现空白页。

Answer 2

我很确定这不是h1与div之间的问题。但是在内容之前使用元素并使用page-break-before时，它确实工作得更好：总是如此。

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

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

按预期工作。

Answer 3

我发现我必须将paginationMode的{{1}}属性设置为UIWebView（或除了默认UIWebPaginationModeTopToBottom值之外的任何其他值），以便CSS页面 - 打破要使用的规则。

如何在iOS上打印分页符？

3 个答案: