iOS Swift 3 troubles to generate PDF from UIWebview - html

Question

I'm currently developing an application using iOS 10 and Swift 3
The purpose of this application is to make a PDF file with the content of my UIWebview
It doesn’t work and I have to delete theses lines to generate the PDF.
<div>
#Test#
</div>
Otherwise we have a trouble with in my IBAction :
for i in 1...render.numberOfPages {
UIGraphicsBeginPDFPage();
let bounds = UIGraphicsGetPDFContextBounds()
render.drawPage(at: i - 1, in: bounds)
}
The memory increase like if it was an infini loop
The pdf is not generated and I don't understand why.
Does somebody has an idea about this ?
And I don’t understand why ?
If someone has an idea ?
My swift IBAction :
if let contentOpt = self.contentFile {
let fmt = UIMarkupTextPrintFormatter(markupText: contentOpt)
let render = UIPrintPageRenderer()
render.addPrintFormatter(self.webView.viewPrintFormatter(), startingAtPageAt: 0)
let page = CGRect(x: 0, y: 0, width: 595.2, height: 841.8) // A4, 72 dpi
let printable = page.insetBy(dx: 0, dy: 0)
render.setValue(NSValue(cgRect: page), forKey: "paperRect")
render.setValue(NSValue(cgRect: printable), forKey: "printableRect")
let pdfData = NSMutableData()
UIGraphicsBeginPDFContextToData(pdfData, CGRect.zero, nil)
print("Data ", pdfData)
for i in 1...render.numberOfPages {
UIGraphicsBeginPDFPage();
let bounds = UIGraphicsGetPDFContextBounds()
render.drawPage(at: i - 1, in: bounds)
}
UIGraphicsEndPDFContext();
let documentsPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
print("PATH => \(documentsPath)")
pdfData.write(toFile: "\(documentsPath)/file.pdf", atomically: true)
}
This is my CSS code :
<style>
.footer {
page-break-after: always;
}
#media print {
body {
-webkit-print-color-adjust: exact !important;
font-size: small;
}
.pageBreak {
page-break-after: always;
color:red;
}
.headerPDF{
width:100%;
height:50px;
}
#containerImageFuelAndMileage{
text-align: center;
margin-top: 1pt;
}
}
.green, .yellow, .red {
z-index: 10;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 30px;
height: 30px;
}
.green {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAApCAQAAAA/+6kbAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgBw0QAAiIJ56tAAAB5klEQVRYw7XX3U7UQBTA8Vk2WVFU0CdgkV0QDfgoRlZDVl8HQ9SIIUYNEZU74o0xxk+MWVGEsMgzoC749QTuNvl70dW225memdKeuWja9OSXtjNnThUql1HkEZej1/KClgGPet6UDwF4zORJFXlIEB6X8qL6eEA0/mPZQgWWiIfHxawpPQTQoZYlVeA+5mgznR20SHKsZAXdE6AnlLKB7spQFt+qwB0BekpJNwOr4fVtBd0WoGc+1EtVaOFxxQFaEKDn/6AoNcq37pKrW0K3BOhFAIWpU13Ix+TX6AgFVBiyw+YF6CWHohn+YYSvsVtDNVkzbgrQK/p7cxSKMl+0t3fLpGbcEKDXHI5nKcrsGlM61DTQ9TQQStFITGsz3ZNyTYDecET/LhTDCU8F8IcLoYQ5AXprgpK/VRy7KkDvzFAwAyXsPIrZg0DButJN9yj2WIAayZCpWrjHewnS10D3WGNArpnR0wqtVNBRGdLtV67YBztItwtX2XOAPnLMDtJv+GPsW0LrHLeFTL3FON8toE8M2kPmNuY0PwRoww1K6pgm+JkAbbpCyc2ZGdtyh6Q+8Ay/NFAzDSS3nGdjWJOhNJBNdzsZwbbTQnaN9BS/u9BnTqSFbHt2H9vhZHrI/vfgHKsHg1B/AXlXUdOz+ocUAAAAAElFTkSuQmCC) #14c77c no-repeat center !important;
background-size: 20px 14px !important;
}
.yellow {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA2CAQAAAArUtIRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgBw0QAR384UsHAAAD80lEQVRYw7WYT2xURRzHv+xz1bRgu8VWQKmlAoJBQ1Ir5YIJQYPEqISDGKNGEyEhMbGamKgc9IInEvVgjEJFS5EYL+pBjCFiyQYoAokNLdADqcHEiHZZirWxsB8Pu52d9968t+816bzDvp3fbz7fmd/On9+sUIqnh7tS+Qulcx/lb7bMrgDAHubOrgCM8NDsCsAUO/FmUwCgn7trt5mDEpQmrdUqtel51fnqi9qhAzXa1uhBOzs5Q4no0sdtMw3ROr7jBrXLRRanF7iXbxKgAQpsTTuCDN1MJMQfoTXtLMpxyNnPQ3xIwVf3H2+SSTtNWzkXQF9mN2sqIHuanqcz/TpYwsUA/BXqnOvgE+rTr+RmRnz4PTQ6F9plnkq+OKuvWfIWfMI5N0aBH1mUHG8L7PL9pGuc7hd4jTlp8FWBLq4b/DgdEe5tMSiP9miBDCcNvsQT6fpYwfcw5upY+eM5Kzy7Z4TfVwlth0sgw5DBj3DLjPFliQfDApus/m+eAf5z3+S+4pcQ4ktjPJt2juDxRWhbOewXuJV/jGlbanxvCP8LOb/Aemvzmh9C5GLG5LE/hD8ZXP3iXWM8GkLcwRCfRkh49NXGI/G1Me8KGBdUZtdeh4THAQe+wbUOBo3DswH8sLHsDez7njUxpssJFx6Jv4zLOsuw0MID9FgSHgeT4tFNajQJxhUr2XhfK3zJx4uSXtYNSZ769HQgNTmujSpa329Wh+olSY2y8ob7LeX5nA718jM8PL4K1R8L9X5p1WiHaK3PqYlTIdQ+Bz7vCM5qYy3KOsWC24RLIgne3nwuZfSbidx9gciOaYNOxaaFeT3mi/10WW7eRjMaNF86Q44FPRIjkdcmXXVauszbsH0WFMk6httoHUZ2Ocq8iC0kwx/G6yWxyEptH3c2cElE4+3dDdqFrAn5bUSTBgZ8+P7YS1R1EzlbPg9eNRUlHoiUOJEQ38aU8Xy7LHA7k6bq+8iGDRwH4OcaOV11pUzROn3of2wN/5kYiWM18Y9apN7yZifEYv411WPcEyNRF4tv4XfDmWRpVUC8ZSkP0hyLiXrqKkEsl/eQLZDlV8s44Dg8az1zOWwRhqfHWnVYwVXL4TzLUuHv9PV+ktXTFttps5WfQpEXEuM38qfVsmSfjX7HbYEL60+RaXD1WR46nd+w7UH37b5RAPzAloh00mMDBwP+Jbr9XuGb/pPq1bxA3TX1K68LGtW4riunBVqpTq1XU8BvQtu1v/ZNf1nE/lmrnGNVmOaOa5bXGU8Fn+QddyCjf7yFfMC1hPCPoq/j8TMkxw7ysX+FnKGbljhGkr9zWvSwurRSS9SsemVVUEGXNKQBHbFO9IjyP6DLBdf+7yKKAAAAAElFTkSuQmCC) #ffaa01 no-repeat center !important;
background-size: 18px 20px !important;
}
.red {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAArCAQAAAAA/GqmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgBw0QCiEweu5LAAAAP0lEQVQoz2P8b8AgwoAMrjD83/IfFUQxMWCAUaFhK8TC8ILhHorIF8b/g8JdLQzmKCLtNE6rLAx3GM6iiLwDACVJK/z9gk6AAAAAAElFTkSuQmCC) #c3002f no-repeat center !important;
background-size: 4px 17px !important;
}
.grayBack {
background: #eeeeee !important;
}
.whiteBack {
background: #ffffff !important;
}
body {
position: absolute;
display: inline;
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
#date {
top: 0;
right: 30px;
position: absolute;
}
</style>
<style>
#header {
position: relative;
display: block;
height: 340px;
width: 100%;
}
#logoNissan {
position: absolute;
z-index: 10;
top: 0;
left: 43px;
width: 129px;
}
#title > span {
position: absolute;
left: 206px;
top: 53px;
font-size: 15px;
font-weight: bold;
color: #343434;
}
#date {
}
#date > div {
line-height: 12px;
}
#date > span:nth-of-type(1) {
}
#date > span:nth-of-type(2) {
margin-left: 30px;
}
#date > span {
display: inline-block;
}
#date > span:nth-of-type(-n+2) {
font-size: 12px;
font-weight: bold;
color: #343434;
}
#date > span:nth-of-type(n+3) {
font-size: 12px;
font-weight: normal;
color: #343434;
}
#gray {
position: absolute;
top: 120px;
height: 190px;
width: 100%;
background: #eeeeee !important;
}
#gray > div {
display: inline-block;
}
#gray > div:nth-of-type(n+1):nth-of-type(-n+6) {
position: relative;
display: inline-block;
vertical-align: middle;
}
#gray > .green {
margin-left: 180px;
}
#gray > div:nth-of-type(n+1):nth-of-type(-n+6):nth-of-type(odd) {
margin-top: 40px;
}
#gray > div:nth-of-type(n+3):nth-of-type(-n+6):nth-of-type(odd) {
margin-left: 20px;
}
#gray > div:nth-of-type(n+1):nth-of-type(-n+6):nth-of-type(even) {
color: #343434;
font-size: 12px;
font-weight: bold;
margin-left: 20px;
margin-top: 35px;
}
#gray > #DealerLine {
left: 206px;
height: 150px;
font-weight: normal;
}
#gray > #DealerLine > span {
color: #343434;
font-size: 14px;
}
#gray > #DealerLine > span:nth-of-type(3) {
top: 10px;
position: relative;
}
#gray > #DealerLine > span:nth-of-type(even) {
margin-left: 20px;
font-weight: bold;
}
#gray > #DealerLine > span:nth-of-type(odd) {
font-weight: normal;
}
#gray > #DealerLine > div {
line-height: 10px;
}
</style>
<style>
.marginContainer{
margin-top: 6px;
}
#descriptionLineColor {
width: 951px;
}
#custDetail {
position: relative;
display: block;
width: 100%;
height: 305px;
margin-top: 25px;
}
#custTitle {
position: absolute;
left: 30px;
font-size: 16px;
font-weight: bold;
color: #c3002f;
}
#custInfos {
position: absolute;
top: 42px;
left: 30px;
line-height: 0px;
}
#vehicleTitle {
position: absolute;
top: 115px;
left: 30px;
line-height: 0px;
font-size: 16px;
font-weight: bold;
color: #c3002f;
}
#vehicleInfos {
position: absolute;
top: 140px;
left: 30px;
}
#vehicleDescription {
position: absolute;
right: 5%;
top: 42px;
width: 50vw;
text-align: center;
}
#custInfos > span {
position: relative;
color: #343434;
font-size: 14px;
text-align: left;
}
#custInfos > div {
line-height: 35px;
}
#custInfos > span:nth-of-type(odd) {
font-weight: normal;
}
#custInfos > span:nth-of-type(even) {
font-weight: bold;
}
#carImg {
position: relative;
top: 85px;
right: 6%;
display: block;
margin: 0 auto;
float: right;
width: 47%;
border-radius: 15px;
}
.containerFuel {
width: 40%;
display: inline-block;
position: relative;
}
.imageFuel {
width: 40%;
margin-top: 18px;
margin-bottom: 18px;
border-radius: 15px;
}
.iconFuelOrMileage {
width: 49px;
}
</style>
<style>
#healthCheck {
position: relative;
display: block;
width: 100%;
height: 100%;
}
#topBar {
height: 100 px;
width: 100%;
background: #f4f4f4 !important;
box-shadow: 0 4px 2px -2px #e1e1e1;
margin-bottom: 4px;
text-align: left;
padding-bottom: 10 px;
}
/*#topBar > div {
/*position: relative;
/*display: inline-block;
}*/
/*#topBar > div: nth-of-type(1) {
margin-top: 25 px;
margin-left: 30 px;
margin-bottom: 15 px;
}*/
/*
#topBar > .green {
}
#topBar > div:nth-of-type(n+2) {
margin-bottom: 9px;
vertical-align: middle;
}
#topBar > div:nth-of-type(n+4):nth-of-type(even) {
margin-left: 22px;
}
#topBar > div:nth-of-type(n+3):nth-of-type(odd) {
font-size: 12px;
font-weight: bold;
color: #343434;
}
#topBar > div:nth-of-type(1) > span:nth-of-type(1) {
font-size: 17px;
font-weight: bold;
color: #c3002f;
}*/
.CategoryTitle, .CategoryContent {
}
.CategoryTitle > div, .CategoryContent > div {
margin-left: 30px;
position: relative;
}
.CategoryTitle {
height: 45px;
width: 100%;
}
/* From all div into .CategoryTitle keep the first one */
.CategoryTitle > div:nth-of-type(1) {
display: inline-block;
top: 15px;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
color: #343434;
}
.CategoryContent {
height: 25px;
width: 100%;
}
.CategoryContent > .green, .CategoryContent > .yellow, .CategoryContent > .red {
float: right;
margin-right: 30px;
margin-top: 6px;
}
/* From all div into .CategoryContent keep the first one */
.CategoryContent > div:nth-of-type(1) {
display: inline-block;
font-size: 12px;
font-weight: normal;
color: #343434;
}
#healthCheckBot {
margin-bottom: 62px;
text-align: center;
}
#fakeContent {
height: 150px;
}
</style>
<style>
#bodyPaint {
position: relative;
display: block;
width: 100%;
height: 100%;
}
#BodyTitle > span {
position: relative;
display: block;
margin-left: 30px;
}
#BodyTitle > span:nth-of-type(1) {
font-size: 17px;
font-weight: bold;
color: #c3002f;
}
#BodyTitle > span:nth-of-type(2) {
margin-top: 22px;
font-size: 17px;
font-weight: normal;
color: #343434;
}
.BodyPaintPictureContainer {
position: relative;
display: block;
width: 100%;
height: 415px;
margin: 0 auto;
border: 1px solid black;
background-color: #343434;
}
.BodyPaintPicture {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#bodyPaintBot {
margin-bottom: 50px;
}
</style>
<style>
#signatures {
position: relative;
display: block;
width: 100%;
height: 450px;
}
#signaturesTitles {
position: absolute;
top: 50px;
}
#signatureOne, #signatureTwo {
position: relative;
display: inline-block;
}
#signatureOne {
margin-left: 30px;
}
#signatureTwo {
margin-left: 21px;
}
#signatureOne > div:nth-of-type(1), #signatureTwo > div:nth-of-type(1) {
font-size: 17px;
font-weight: bold;
color: #c3002f;
margin-bottom: 40px;
}
.signatureBlock {
width: 340px;
height: 300px;
background: #ffffff !important;
box-shadow: 0 0 2px 1px #8a8a8a inset;
}
</style>
<style>
/* new balises */
.containerBodyDamageElement {
margin-top: 40px;
width: 45%;
display: inline-block;
text-align: center;
}
.containerPictureDamage {
display: inline-block;
width: 45%;
}
.pictureDamage {
display: inline-block;
width: 50px;
}
.imgDamage {
width: 100px;
}
.containerContentDamage {
}
.containerSidePictureAndType {
display: -webkit-box;
top: 120px;
position: absolute;
}
.iconSideDamage {
width: 50px;
margin-left: 140px;
}
.typeDamage {
}
.commentDamage {
width: 150px;
height: 150px;
}
#annexe {
position: relative;
display: block;
width: 100%;
height: 100%;
}
#annexeTitle {
position: relative;
display: block;
padding-top: 50px;
margin-left: 30px;
font-size: 17px;
font-weight: bold;
color: #c3002f;
}
.annexePortrait {
}
.annexePicPortrait {
vertical-align: middle;
position: relative;
display: inline-block;
margin-left: 30px;
width: 200px;
height: 268px;
}
.annexeImg {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.picto {
position: relative;
display: inline-block;
vertical-align: top;
height: 180px;
width: 85px;
}
.pictoNum {
position: absolute;
display: inline-block;
margin-left: 25px;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #c3002f !important;
}
.numInside {
position: relative;
display: block;
top: 13px;
text-align: center;
font-size: 15px;
font-weight: bold;
color: #ffffff;
}
.pictoDmg {
position: absolute;
right: 0;
width: 70px;
height: 70px;
}
.imgDmg {
height: 80%;
width: 80%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.comment {
margin-top: 30px;
}
.dmgComment {
margin-top: 15px;
font-size: 10px;
}
.comment > .dmgType > div:nth-of-type(1) {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #343434;
}
.comment > .dmgType > div:nth-of-type(2) {
display: inline-block;
font-size: 10px;
font-weight: normal;
color: #343434;
}
#disclaimer {
font-size: 10px;
color: #343434;
}
</style>
My Html code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<div id="header">
<div>
<div id="custDetail">
<div id="custTitle">
<span>#CUSTOMER_DETAILS#</span>
</div>
<div id="custInfos">
<span>#NAME_LABEL# : </span>
<span>#NAME#</span>
<div> <br> </div>
<span>#PHONE_LABEL# : </span>
<span>#PHONE#</span>
</div>
<div id="vehicleDescription">
<span><b>J11 Qashqai Tekna 5DR Wagon 1.6L Turbo Diesel 4WD 4 Cyl 6sp Manual</b></span>
</div>
<div id="vehicleTitle">
<span>#VEHICLE_DETAILS#</span>
</div>
<div id="vehicleInfos">
<span>#VIN_LABEL# : </span>
<span><b>#VIN#</b></span>
<div> <br> </div>
<span>#MODEL_LABEL# : </span>
<span><b>#MODEL#</b></span>
<div> <br> </div>
<span>#REG_NUM_LABEL# : </span>
<span><b>#REG_NUM#</b></span>
<div> <br> </div>
<span>#KILOMETER_LABEL# : </span>
<span><b>#KILOMETER#</b></span>
<div> <br> </div>
<span>#CARBURANT_LABEL# : </span>
<span><b>#CARBURANT#</b></span>
<div> <br> </div>
</div>
<div>
</div>
</div>
</div>
<div id="containerImageFuelAndMileage">
<div class="containerFuel">
<div class="">
<div class="fuelDescription">
<div> #MILEAGE# : <b>#MILEAGE_VALUE#</b></div>
</div>
</div>
<div class="containerPictoFuel">
<div class="pictoFuel">
<img class="iconFuelOrMileage" alt="imgDmg" src="https://cdn4.iconfinder.com/data/icons/adiante-apps-app-templates-incos-in-grey/512/app_type_gas_stations_512px_GREY.png">
</div>
</div>
<div class="containerFuelDescription">
</div>
</div>
<div class="containerFuel">
<div class="">
<div class="fuelDescription">
<div> #FUEL# : <b>#FUEL_VALUE# </b></div>
</div>
</div>
<div class="containerPictoFuel">
<div class="pictoFuel">
<img class="iconFuelOrMileage" name="" alt="imgDmg" src="https://cdn4.iconfinder.com/data/icons/adiante-apps-app-templates-incos-in-grey/512/app_type_gas_stations_512px_GREY.png">
</div>
</div>
<div class="containerFuelDescription">
</div>
</div>
</div>
<div id="healthCheckBot">
<p> Page 1 </p>
</div>
<div class="footer"></div>
<div>
<div id="healthCheck">
<div id="topBar">
<div>
#Test#
</div>
</div>
</div>
</div>
</body>
</html>