All geek questions in one place

How to print page breaks using iOS?

I am creating a multi-page html document that I would like to send to an Airprint printer from my application. Each page is discrete and should start with its own sheet.

It should be relatively simple - the content of each page is immediately followed by a div element that has display: block; page-break-after: always; display: block; page-break-after: always; . Here is a simple example:

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

This document prints perfectly from Safari and Chrome, which place all page breaks where they should be. However, on iOS, page breaks are not inserted.

To print the html, I use the UIPrintInteractionController to print the contents of the UIWebView using the UIViewPrintFormatter . Something like that:

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

All this seems very standard, and I can only wonder why page breaks print correctly in other Webkit browsers, but not in UIWebView. Any ideas on how to make page breaks in iOS?

+4
source share
3 answers

I have no general solution, but I managed to get page breaks after some attempts. It seems that the UIWebView is a bit concise, where you can use page-break-before/page-break-after . Taking the hint from this question , I decided to try adding page break styles to h1 elements instead of divs , and, to my surprise, page breaks appeared. Here's what it looks like now:

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

I also added a duplicate of the .pagebreak-before selector, now having the :first-child pseudo-element. This is to prevent blank pages at the beginning of the document.

+4
source

I am sure that this is not h1, but a div, which is the problem. But when using an element before the content, it worked much better and always used a page break: always.

At first I tried something like this:

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

And css:

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

This gave me very strange page breaks, and the title could be the only element vertically centered on the page.

Change markup to:

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

And css for:

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

Worked as expected.

+2
source

I found that I need to set the paginationMode property of my UIWebView to UIWebPaginationModeTopToBottom (or any other value except the default UIWebPaginationModeUnpaginated ) for the CSS CSS break rules that will be used.

+1
source

Source: https://habr.com/ru/post/1501385/

More articles:


All Articles