8

アプリから Airprint プリンターに送信したい複数ページの HTML ドキュメントを生成しています。各ページは個別であり、独自のシートから開始する必要があります。

これは比較的単純なはずです。各ページのコンテンツの直後に次のような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: を使用すると、はるかにうまく機能しました。

まず、次のようなことを試しました。

<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

CSS 改ページ規則を使用するには、my topaginationModeプロパティ(または既定値以外の値)を設定する必要があることがわかりました。UIWebViewUIWebPaginationModeTopToBottomUIWebPaginationModeUnpaginated

于 2015-10-19T21:22:25.017 に答える