Generating PDF from HTML with tables and rows - ios

Question

I am developing a simple application for creating invoices in Swift for iOS.
For this, I have a simple template HTML with tables and rows (td / tr).
I want to convert this HTML template to a multiple page PDF. It's working like a charm thanks to UIPagePrintRenderer but some rows are duplicated on two pages or the row is cut on the two pages.
I have tried to add css "page-break" on my template. I have a good placement when I print template on a web browser.
But, when I export HTML to PDF (thanks to UIPagePrintRenderer), the CSS styles were not applied on the PDF document, and my elements are duplicated.
I am looking for a better solution to convert HTML to PDF. Any one encountered a similar problem?
UPDATE :
Thanks for response guys, below more information of problem and my code.
First this is my function for convert HTML string to a PDF file.
func createPDF(formatter: UIViewPrintFormatter) -> String {
let render = CustomPrintRenderer()
render.addPrintFormatter(formatter, startingAtPageAt: 0)
formatter.maximumContentHeight = 605.0
let pdfData = NSMutableData()
UIGraphicsBeginPDFContextToData(pdfData, CGRect.zero, nil)
for i in 0...render.numberOfPages {
UIGraphicsBeginPDFPage()
if(i != 0) {
render.setupAfterFirstPage()
}
render.drawPage(at: i, in: UIGraphicsGetPDFContextBounds())
}
UIGraphicsEndPDFContext()
pdfFilename = "\(AppDelegate().getDocDir())/Invoice-\(invoiceNumber!).pdf"
pdfData.write(toFile: pdfFilename, atomically: true)
return pdfFilename
}
Second, this is my CustomPrintRenderer() class for specified printing zone.
class CustomPrintRenderer: UIPrintPageRenderer {
// A4 Gabarit
let A4PageWidth: CGFloat = 595.2
let A4PageHeight: CGFloat = 841.8
let topPadding: CGFloat = 50.0
let bottomPadding: CGFloat = 100.0
let pageInset: CGFloat = 42.5
//let leftPadding: CGFloat = 100.0
//let rightPadding: CGFloat = 100.0
override init() {
super.init()
initFrame()
}
func initFrame() {
// Specify the frame of the A4 page.
let pageFrame = CGRect(x: 0.0, y: 0.0, width: A4PageWidth, height: A4PageHeight)
let printable = CGRect(x: 0.0, y: -topPadding, width : A4PageWidth, height: A4PageHeight - topPadding).insetBy(dx: pageInset, dy: pageInset)
self.setValue(NSValue(cgRect: pageFrame), forKey: "paperRect")
self.setValue(NSValue(cgRect: printable), forKey: "printableRect")
}
func setupAfterFirstPage() {
let printable = CGRect(x: 0.0, y: topPadding, width : A4PageWidth, height: A4PageHeight - topPadding - bottomPadding).insetBy(dx: pageInset, dy: pageInset)
self.setValue(NSValue(cgRect: printable), forKey: "printableRect")
}
}
This is my invoice on HTML (on ios app)
This is my invoice converted to PDF.
You can see on this screenshots than my items are cropped.
So, thanks to "page-break" style in css or other way, i want to display a item in next page if the element can not be placed totally on current page.
UPDATE 2 :
This is my HTML Template :
Home'Invoice - Invoice
body {
max-width:90%;
margin:auto;
padding:30px;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#485C74;
}
/*#media print
{
table { page-break-after:auto; }
tr.items { page-break-inside:avoid; page-break-after:auto; }
td.items { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
}*/
/*#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
}*/
.middle {
width: 50%;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.logo-images img {
width:100%;
max-width:300px;
max-height:150px;
}
.invoice-box .left-pos {
text-align: left;
}
.invoice-box .center-pos {
text-align: center;
}
.invoice-box .right-pos {
text-align: right;
}
.invoice-box table thead.heading td{
background:#fab800;
border-bottom:1px solid #485C74;
font-weight:bold;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#485C74;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td, .invoice-box table tr.service td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td, .invoice-box table tr.service.last td{
border-bottom:none;
}
.invoice-box .items-last, .invoice-box .services-last{
border-top:2px solid #485C74;
font-weight:bold;
}
footer {
text-align: center;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tbody>
<!-- Header Top section -->
<tr class="top">
<td colspan="5">
<table>
<tbody>
<tr>
<td class="logo-images"> <img src="data:image/png;base64, #LOGO_USER#"> </td>
<td class="right-pos">
Invoice : ##INVOICE_NUMBER#
<br>
Date : #INVOICE_DATE#
<br>
Due Date : #DUE_DATE#
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Payment section -->
<!-- Informations section -->
<tr class="information">
<td colspan="5">
<table>
<tbody>
<tr>
<td class="middle left-pos"> #SENDER_INFO# </td>
<td class="middle right-pos"> #RECIPIENT_INFO# </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Informations section -->
</tbody>
</table>
</div>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tbody>
<!-- Payment section -->
<thead class="heading">
<td> Payment Method </td>
</thead>
<tr class="details">
<td class="left-pos"> Payment desired : #PAYMENT_METHOD# <br>
A deposit of #PAYMENT_PERCENT# must be paid when signing "good for the agreement" of this invoice, is #PAYMENT_PERCENT_PRICE#.
</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tbody>
<!-- Items section -->
<thead class="heading">
<td class="left-pos"> Item / Description </td>
<td class="center-pos"> Reference </td>
<td class="center-pos"> Quantity </td>
<td class="center-pos"> Unit cost </td>
<td class="right-pos"> Total Price (excl. tax)</td>
</thead>
#ITEMS#
<tr class="total">
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right-pos items-last">
Subtotal (excl. tax) : #TOTAL_AMOUNT_HT#
<br>
Sales Tax (#VAT_RAT#) : #VAT_PRICE#
<br>
<br>
Total (incl. tax) : #TOTAL_AMOUNT_TTC#
</td>
</tr>
<!-- Items section -->
</tbody>
</table>
</div>
<footer>
<div class="footer_content">
<hr>
<p>Invoice powered By </p>
<div class="logo-images"> <img src="data:image/png;base64, #LOGO_FOOTER#"> </div>
</div>
</footer>
</body>
</html>
single_item.html :
<tr class="item">
<td class="left-pos">#ITEM_NAME# <br> #ITEM_DESC#</td>
<td class="center-pos">#ITEM_REF#</td>
<td class="center-pos">#ITEM_QUANTITY#</td>
<td class="center-pos">#ITEM_UNIT_COST#</td>
<td class="right-pos">#ITEM_TOTAL_PRICE#</td>
</tr>
last_item.html :
<tr class="item last">
<td class="left-pos">#ITEM_NAME# <br> #ITEM_DESC#</td>
<td class="center-pos">#ITEM_REF#</td>
<td class="center-pos">#ITEM_QUANTITY#</td>
<td class="center-pos">#ITEM_UNIT_COST#</td>
<td class="right-pos">#ITEM_TOTAL_PRICE#</td>
</tr>
UPDATE 3 :
When I added this code on my "item" class, these items have a good page-break but the display is bad. But whitout "display:block;" is still not work :
.item {
display:block;
page-break-inside:avoid;
page-break-after: auto;
}