Как вы печатаете разрывы страниц с 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>

Этот документ отлично распечатывается в 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?


person weston    schedule 10.09.2013    source источник


Ответы (3)


У меня нет общего решения, но мне удалось заставить работать разрывы страниц после некоторой возни. Похоже, что 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. Это необходимо для предотвращения появления пустой страницы в начале документа.

person weston    schedule 10.09.2013

Я почти уверен, что проблема не в 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; }

Работал, как ожидалось.

person Johan Nordberg    schedule 17.06.2015

Я обнаружил, что мне нужно установить для свойства paginationMode моего UIWebView значение UIWebPaginationModeTopToBottom (или любое другое значение, кроме значения UIWebPaginationModeUnpaginated по умолчанию) для использования правил разрыва страницы CSS.

person arlomedia    schedule 19.10.2015