<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Banner-1.webp" alt="M2P Fintech" title="" width="100%" height="487">In the world of iOS app development, the ability to dynamically generate PDF documents from HTML content is a game changer. Imagine the possibilities of effortlessly transforming dynamic data in the form of interactive reports, professional invoices, or document generation workflows into stunning PDFs. &nbsp; In this blog, our Software Development Engineer, <a class="link" href="https://www.linkedin.com/in/balaji-pandian-905b13a4/">Balaji Pandian</a> will give you step-by-step instructions on how to generate a PDF file from HTML in an iOS app using Swift.&nbsp; To begin with, you must have Xcode installed on your machine, as it serves as the development environment for iOS apps.&nbsp;&nbsp; Let’s get started.&nbsp;<h2 class="heading-node" id="hme28mddg">Step 1: Project Set up&nbsp;</h2><ul class="list-node" id="zg7jdvkxs"><li>Open the Xcode and create a new iOS project.</li><li>Select the "Single View App" template and give your project a suitable name.</li><li>Choose Swift as the programming language and configure the desired options for other project settings.&nbsp;</li><li>&nbsp;After the project is created, navigate to the ViewController.swift file.&nbsp;</li></ul><h2 class="heading-node" id="4yc0san15">Step 2: Import Frameworks&nbsp;&nbsp;</h2>To generate PDF from HTML, we need to import the necessary frameworks. Add the following import statements at the top of ViewController.swift file:<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Screenshot-2023-07-18-at-11.38.22-AM.webp" alt="M2P Fintech" title="" width="100%" height="137"><h2 class="heading-node" id="y1ph15tmb">Step 3: WebView Setup&nbsp;</h2><ul class="list-node" id="v84kzmck1"><li>Create a new class, ViewController, that inherits from UIViewController and adopts the WKNavigationDelegate protocol. This class will handle the generation of the PDF file.</li><li>Inside the ViewController class, override the viewDidLoad() method and perform the following steps:&nbsp;</li></ul><ul class="list-node" id="ztndi0sl0"><li>Create an instance of WKWebView.&nbsp;<ul class="list-node" id="2z01nr0l1"><li>Set the navigationDelegate of the web view to self.&nbsp;</li></ul></li></ul><img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/MicrosoftTeams-image-41.webp" alt="M2P Fintech" title="" width="100%" height="140"><ul class="list-node" id="chyj4so0r"><li>Drag the Sample Invoice HTML file into the project.</li></ul><img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/MicrosoftTeams-image-42.webp" alt="M2P Fintech" title="" width="100%" height="550">Initiate the HTML file (Invoice.html) from the bundle and load the WebView request.&nbsp;<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Screenshot-2023-07-18-at-11.38.59-AM.webp" alt="M2P Fintech" title="" width="100%" height="142"><h2 class="heading-node" id="y5peyrzg1">Step 4: Generating PDF</h2><ul class="list-node" id="9ty9k7cs1"><li>Implement the webView(:didFinish:) method from the WKNavigationDelegate protocol. This method will be called when the web view finishes loading the JSON string to HTML file content.&nbsp;</li><li>In Swift, the evaluateJavaScript method is used to execute JavaScript code within a WKWebView or WKWebViewConfiguration object. It allows you to interact with the web content loaded in the webView and manipulate it using JavaScript.&nbsp;<ul class="list-node" id="c7580oopd"><li>Pass the webView instance to generatePDF (formatter: UIViewPrintFormatter() method.&nbsp;<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Screenshot-2023-07-18-at-11.39.34-AM.webp" alt="M2P Fintech" title="" width="100%" height="637"></li><li>Mapping the JSON string to HTML key value&nbsp;&nbsp;</li></ul></li></ul><img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/MicrosoftTeams-image-39-1.webp" alt="M2P Fintech" title="" width="100%" height="930"><ul class="list-node" id="p5u3a95y2"><li>Implement the generatePDF method that takes a WKWebView instance and a handler.&nbsp;<ul class="list-node" id="a4ggsobqv"><li>Create an instance of UIPrintPageRenderer&nbsp;</li><li>Add the web view's viewPrintFormatter() to the print page renderer&nbsp;</li><li>Set the paper size and printable area of the PDF&nbsp;</li><li>Create an instance of NSMutableData to store the PDF data&nbsp;</li><li>Initiate the PDF context using UIGraphicsBeginPDFContextToData().&nbsp;</li><li>Iterate over the print page renderer's number of pages and draw each page using UIGraphicsBeginPDFPage() and printPageRenderer.drawPage(at:in:).&nbsp;</li><li>End the PDF context using UIGraphicsEndPDFContext().&nbsp;</li><li>Pass the generated PDF data.&nbsp;</li></ul></li></ul><img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Screenshot-2023-07-18-at-11.37.56-AM.webp" alt="M2P Fintech" title="" width="100%" height="677"><ul class="list-node" id="lo9g3z837"><li>Implement the savePDFToDisk(pdfData:) method to save the generated PDF data to the device's document directory.&nbsp;<ul class="list-node" id="525ws2f7l"><li>Check if the PDF data is not NIL&nbsp;</li><li>Get the document directory path using NSSearchPathForDirectoriesInDomains().&nbsp;</li><li>Construct the file path for the PDF&nbsp;&nbsp;</li><li>Use pdfData.write(to:) to save the PDF data to the file&nbsp;</li><li>Handle if any errors occur during the file-saving process&nbsp;</li></ul></li></ul><img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/Screenshot-2023-07-18-at-11.40.10-AM.webp" alt="M2P Fintech" title="" width="100%" height="504">To achieve a PDF preview with full view in Swift UI, you can utilize the PDFView class provided by Apple's PDFKit framework.&nbsp;<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/MicrosoftTeams-image-38.webp" alt="M2P Fintech" title="" width="100%" height="296">The below figure shows the final output of the conversion of PDF file from HTML format<img src="https://m2p-website-file.s3.ap-south-1.amazonaws.com/m2p-website-file/marketing-cms/m2p-blog/2023/07/invoice-1.webp" alt="M2P Fintech" title="" width="100%" height="487">By leveraging the WebKit framework, we have successfully achieved the rendering of HTML content within a WKWebView, subsequently converting it into a PDF document.&nbsp; It is important to note that handling error cases and tailoring the code to meet your specific requirements is essential.&nbsp;&nbsp; There are further possibilities to explore and enhance the PDF generation process by:&nbsp;<ul class="list-node" id="5vxn85mom"><li>Empowering users to dynamically customize the HTML content&nbsp;</li><li>Elevating the PDF layout with print page renderer modifications&nbsp;&nbsp;</li><li>Implementing pagination and header/footer support&nbsp;</li></ul>You can also explore and combine various techniques to create unique and compelling PDFs tailored to your specific requirements on the fly. So, dive in, experiment, and explore.&nbsp; Happy coding!&nbsp; Want to know more, reach out to us at <a class="link" href="mailto:business@m2pfintech.com">business@m2pfintech.com.</a>&nbsp;&nbsp; Our team of experts is eager to connect with you.&nbsp; <a class="link" href="https://m2pfintech.com/newsletter/">Subscribe</a>&nbsp;to our newsletter and get the latest fintech news, views, and insights, directly to your inbox. Follow us on&nbsp;<a class="link" href="https://www.linkedin.com/company/m2pfintech/mycompany/">LinkedIn</a>&nbsp;and&nbsp;<a class="link" href="https://twitter.com/m2pfintech">Twitter</a> for insightful fintech bytes curated for curious minds like you.

Tag: "Swift Uikit (1)"

M2P Fintech