8

我正在生成一个多页 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，我使用 aUIPrintInteractionController来打印 a 的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 上进行分页的任何想法？

4

3 回答 3

5

我没有通用的解决方案，但经过一番摆弄后，我确实设法让分页符正常工作。似乎 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>

...

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

于 2013-09-10T23:30:57.450 回答
3

我很确定这不是 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; }

按预期工作。

于 2015-06-17T17:03:20.803 回答
2

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

于 2015-10-19T21:22:25.017 回答