Add Page Break in HTML print / for PDFKit (plus Avoid Page Break Inside)

A HTML report that is going to be printable, and it has “sections” that should start in a new page.
Is there any way to put something in the HTML/CSS that will signal to the browser that it needs to force a page break (start a new page) at that point? Especially for creating a PDF with HTML and transfored by PDFKit.

  1. For print (Chris Doggett)

Add a CSS class called “pagebreak” (or “pb”), like so:

@media print .pagebreak < page-break-before: always; >/* page-break-after works, as well */
>

Then add an empty DIV tag (or any block element that generates a box) where you want the page break.

It won’t show up on the page, but will break up the page when printing.

P.S. Perhaps this only applies when using -after (and also what else you might be doing with other s on the page), but I found that I had to augment the CSS class as follows:

@media print .pagebreak clear: both; 
page-break-after: always;
>
>

By changing it to page-break-before instead of page-break-after it seems to work. This is what I changed your contextString to, I used a multiline string as it is easier to read and gave it some clearer content.

let contextString = """

Content in page 1



Content in page 2


"""

Here is a very simple example that you could drop into Xcode.

class ViewController: UIViewController  let button = UIButton() 
override func viewDidLoad() super.viewDidLoad()
// Do any additional setup after loading the view.
view.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Print", for: .normal)
button.setTitleColor(.systemBlue, for: .normal)
button.addTarget(self, action: #selector(tapped), for: .touchUpInside)
NSLayoutConstraint.activate([
button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
button.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
])
view.backgroundColor = .systemBackground
>
@objc func tapped() let contextString = """

Content in page 1



Content in page 2


"""
let print = UIMarkupTextPrintFormatter(markupText: contextString)
let render = UIPrintPageRenderer()
render.addPrintFormatter(print, startingAtPageAt: 0)
let page = CGRect(x: 0, y: 0, width: 595.2, height: 841.8) // A4, 72 dpi
render.setValue(page, forKey: "paperRect")
render.setValue(page, forKey: "printableRect")
let pdfData = NSMutableData()
UIGraphicsBeginPDFContextToData(pdfData, .zero, nil)
for i in 0.. render.drawPage(at: i, in: UIGraphicsGetPDFContextBounds())
>
UIGraphicsEndPDFContext();
let av = UIActivityViewController(activityItems: [pdfData], applicationActivities: nil) self.present(av, animated: true, completion: nil)
>
>

Here is a gif of it showing the two pages with the text:

Bonus:

use page-break-inside: avoid; to avoid page break inside