UIPrintPageRenderer breaks content on different pages and skips part of page - html

Question

Im rendering pdf from html content with help of UIPrintPageRenderer, unfortunately sometimes occurs bug, when one element is divided on to parts on different pages. Is there any way to avoid id?
My code and screenshots below:
UIPrintPageRenderer inheritance to specify pdf details.
public class CustomPrintPageRenderer: UIPrintPageRenderer {
fileprivate let offsetX: CGFloat = 40.0
fileprivate let offsetY: CGFloat = 12.0
fileprivate let kHeaderHeight: CGFloat = 36
fileprivate let kFooterHeight: CGFloat = 36
fileprivate let debugFrame = false
fileprivate var name: String?
fileprivate var policy: String?
init(name: String, policy: String, content: String) {
self.name = name
self.policy = policy
super.init()
// Set the page frame.
setValue(NSValue(cgRect: App.A4Rect), forKey: "paperRect")
// Set the printing area frame.
setValue(NSValue(cgRect: App.A4Rect.insetBy(dx: 0, dy: 0)), forKey: "printableRect")
headerHeight = kHeaderHeight
footerHeight = kFooterHeight
// Create formatter
let formatter = UIMarkupTextPrintFormatter(markupText: content)
formatter.perPageContentInsets = UIEdgeInsets(top: kHeaderHeight + 15, left: 36, bottom: 0, right: 36)
addPrintFormatter(formatter, startingAtPageAt: 0)
}
override public func drawHeaderForPage(at pageIndex: Int, in headerRect: CGRect) {
if let name = name as NSString?, let policy = policy as NSString? {
add(name: name, policy: policy, in: headerRect)
}
addLogo(in: headerRect)
if debugFrame {
let path = UIBezierPath(rect: headerRect)
UIColor.red.set()
path.stroke()
}
}
override public func drawFooterForPage(at pageIndex: Int, in footerRect: CGRect) {
addPageNumber(at: pageIndex, in: footerRect)
if debugFrame {
let path = UIBezierPath(rect: footerRect)
UIColor.red.set()
path.stroke()
}
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////
// MARK: -
extension CustomPrintPageRenderer {
fileprivate func addLogo(in headerRect: CGRect) {
let image = #imageLiteral(resourceName: "mss-logo")
let desiredHeight: CGFloat = 40
let newWidth = (desiredHeight * image.size.width) / image.size.height
let imageSize = CGSize(width: newWidth, height: desiredHeight)
let imageRect = CGRect(
x: headerRect.width - imageSize.width - offsetX,
y: headerRect.height - imageSize.height + offsetY,
width: imageSize.width,
height: imageSize.height)
image.draw(in: imageRect)
}
fileprivate func add(name: NSString, policy: NSString, in headerRect: CGRect) {
let text = "\(policy) - \(name)"
let font = UIFont(name: "HelveticaNeue", size: 12.0)
let textSize = getTextSize(text: text as String, font: font!)
let pointX = offsetX
let pointY = headerRect.height - textSize.height
let attributes = [NSAttributedStringKey.font: font!, NSAttributedStringKey.foregroundColor: Color.lightGray]
text.draw(at: CGPoint(x: pointX, y: pointY), withAttributes: attributes)
}
fileprivate func addPageNumber(at pageIndex: Int, in footerRect: CGRect) {
let footerText: NSString = "Page \(pageIndex + 1) of \(numberOfPages)" as NSString
let font = UIFont(name: "HelveticaNeue", size: 12.0)
let textSize = getTextSize(text: footerText as String, font: font!)
let pointX = footerRect.width - textSize.width - offsetX
let pointY = footerRect.origin.y + footerRect.height - textSize.height - 25
let attributes = [NSAttributedStringKey.font: font!]
footerText.draw(at: CGPoint(x: pointX, y: pointY), withAttributes: attributes)
}
fileprivate func getTextSize(text: String, font: UIFont!, textAttributes: [NSAttributedStringKey: AnyObject]! = nil) -> CGSize {
let testLabel = UILabel(frame: CGRect(x: 0.0, y: 0.0, width: paperRect.width, height: footerHeight))
if let attributes = textAttributes {
testLabel.attributedText = NSAttributedString(string: text, attributes: attributes)
}
else {
testLabel.text = text
testLabel.font = font!
}
testLabel.sizeToFit()
return testLabel.frame.size
}
}
** Alert html **
HTML I use to compose alert and add it to pdf.
<tr>
<td></td>
</tr>
<tr>
<div>
<td class="alert" colspan="2">#TEXT#</td>
</div>
</tr>
<tr>
<td></td>
</tr>
** And pdf drawing **
This is how I draw pdf with CustomPrintPageRenderer.
fileprivate func drawPDFUsingPrintPageRenderer(printPageRenderer: UIPrintPageRenderer) -> NSData! {
let data = NSMutableData()
UIGraphicsBeginPDFContextToData(data, App.A4Rect, nil)
for i in 0 ..< printPageRenderer.numberOfPages {
UIGraphicsBeginPDFPage()
printPageRenderer.drawPage(at: i, in: UIGraphicsGetPDFContextBounds())
}
UIGraphicsEndPDFContext()
return data
}
Will be much appreciated for any help!

Answer 1

#media print {
.pagebreak-before:first-child { display: block; page-break-before: avoid; }
.pagebreak-before { display: block; page-break-before: always; }
button {
page-break-inside: avoid;
}
}
Then you probably use those in a class element. Use page break-before for images, etc.