{"id":1668,"date":"2021-06-06T22:48:14","date_gmt":"2021-06-06T19:48:14","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1668"},"modified":"2021-06-06T22:48:16","modified_gmt":"2021-06-06T19:48:16","slug":"create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/","title":{"rendered":"Create PDF file from HTML using jsPDF Javascript Library on Client-Side"},"content":{"rendered":"\n<p>There may be situations where it is necessary to produce PDF files while developing a web application. It may need to be printed especially in cases such as <strong>reporting and invoicing<\/strong>.<\/p>\n\n\n\n<p>PDF file creation in the web application can be performed in two ways. On the <strong>client-side<\/strong> and on the <strong>server-side ( backend)<\/strong>. In this post, I will explain how to create a <strong>PDF<\/strong> file from <strong>HTML template<\/strong> using javascript libraries on the client-side. If you want to generate PDF from HTML template on server side, you can use <strong>weasyprint<\/strong> library in Python and <strong>DOMPDF<\/strong> in PHP.<\/p>\n\n\n\n<p>Before moving on to our example, make sure you have <strong>npm(node package manager)<\/strong> installed on your computer.<\/p>\n\n\n\n<p>In our example, we will use <strong>2 Javascript libraries<\/strong>.<\/p>\n\n\n\n<ol><li><a href=\"http:\/\/raw.githack.com\/MrRio\/jsPDF\/master\/docs\/\">jsPDF<\/a><\/li><li><a href=\"https:\/\/github.com\/niklasvh\/html2canvas\">html2canvas<\/a><\/li><\/ol>\n\n\n\n<h2>1- jsPDF<\/h2>\n\n\n\n<p><strong>jsPDF<\/strong> is a javascript library used to generate PDF documents on the <strong>client side<\/strong>. The documentation is pretty good. <strong>jsPDF<\/strong> is written according to Asynchronous module definition (AMD) standards. We will install the library into our project by running the following line of code.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">npm install jspdf --save<\/pre><\/div>\n\n\n\n<p>If you want to include the library in the project as<strong> cdn<\/strong>, you can use the script tag below.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.3.1\/jspdf.umd.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<h2>2- html2canvas<\/h2>\n\n\n\n<p>To install the <strong>html2canvas <\/strong>library, we will download it from <strong>github <\/strong>to our computer.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;shell&quot;,&quot;mime&quot;:&quot;text\/x-sh&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;Shell&quot;,&quot;modeName&quot;:&quot;shell&quot;}\">git clone git:\/\/github.com\/niklasvh\/html2canvas.git<\/pre><\/div>\n\n\n\n<p>Then, we open the <strong>terminal <\/strong>screen in the folder we have installed on our computer and install the dependencies.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">npm install<\/pre><\/div>\n\n\n\n<p>Finally we build to create browser package.(unification, uglification, minification)<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">npm run build<\/pre><\/div>\n\n\n\n<p><strong>html2canvas<\/strong> reads the different styles applied to the DOM and elements, rendering the current page as a canvas image.<\/p>\n\n\n\n<h2>Example<\/h2>\n\n\n\n<p>I have prepared the example in this post as a single page HTML file.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&lt;!DOCTYPE\\u00a0html&gt;&lt;br&gt;&lt;html\\u00a0lang=\\&quot;en\\&quot;&gt;&lt;br&gt;&lt;head&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;meta\\u00a0charset=\\&quot;UTF-8\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;meta\\u00a0http-equiv=\\&quot;X-UA-Compatible\\&quot;\\u00a0content=\\&quot;IE=edge\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;meta\\u00a0name=\\&quot;viewport\\&quot;\\u00a0content=\\&quot;width=device-width,\\u00a0initial-scale=1.0\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;title&gt;Document&lt;\/title&gt;&lt;br&gt;&lt;\/head&gt;&lt;br&gt;&lt;body&gt;&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0id=\\&quot;html-template\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0style=\\&quot;margin-top:\\u00a050px;margin-left:\\u00a050px;\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0style=\\&quot;min-width:\\u00a0600px\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;header&gt;&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0class=\\&quot;row\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0class=\\&quot;col\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;a\\u00a0target=\\&quot;_blank\\&quot;\\u00a0href=\\&quot;https:\/\/etemkeskin.com\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;img\\u00a0style=\\&quot;max-width:\\u00a070px;\\&quot;\\u00a0src=&#039;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABlCAYAAAC7vkbxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAniSURBVHhe7Z17jBtHHcdndn0Jl0fbS6kE4tG0ShGEh0ppCSRqkFKC2rS0SiEIhCiPiiiEXG3n7LWTtMWFkPOuL2dfLkmViJbyKIGmQERaFbW0PC99ENI\/qrQIUlqpagjVRaAm9NqcvcN3vL9Awp29u\/bu2r6bj+Sb32\/s89n73d\/Mb3Zm55hCoVAoFAqFQqFQKBQKhUKhUDQCp3LKsuHrW84v67F5XBc9gvF5TLAeLsSoptujmm0f21La9Hd6aVsw5QTp6xu4UK9UlsI8\/XiXrK\/DSxDqEITaUxgyfkJ1LWPKCGIkzM+j+CIey6sVDSAE\/7PG7fVmKfsQVUVORwuS\/Vp\/T2WmvpEzIYW4wKkNAM5SVjGzlbxI0ansOIykuVbofB\/OqKvgznZqA+MTSxYtPz7y5K+eIj8yOi5C0knrY+iUvwXzSqcmPLgtrjS3Zf9AbiRoVHYE6CcSEOM3MEMXQyI0HiczMjomQjKJ\/F3Ihr5Cbi3G8TgI0Y7hm83F62WG9c7qMw0iKnxBYdh4ntzQaXtBssn+BbbQ7oX5YadmUg4hQ7JePDr\/\/r17P1OhuiqpROHjGrNvgylTYP8I1msNZbaTFzptLUg20T+\/IvSHOBfvpqqJCJbFATPJq4kRN+\/Gt\/0yuZ5BlO0vlIzryQ2dtu1DjF7z7TbT9tcR4wTO\/Ku8iCHB62Rz9zvH8w5S6nPIjIS2FGRj4ttvRUK+H+b7nJoJjCIDujpf2vAY+Z6AgHeQ6R3BlCBlHrsfxaWONxGctTchHT1ArmdIwOcczxuI0FNkRkLbCYJs6rs4KxeTOwHBeVOXNiDm42R6An3IKJmR0FaCYJyxAQfgS+ROxn2FolEkuzE4+ytZXpmegqTj1qdQbHG8STlR1mIpshsGKfQrZHoCJ8j0G6nLS+Zoq+8hd1Iw2EsPDva9RG7DoMmaT6YnRJk\/SmYktIUgeqUyiGKO400CZy+YQ9ld5DWHYJeQ5YWDA9vTL5AdCS0XxEhYq1Hc6Hg12UFl82hsEVmuIJruJjMyWiqIbKpwyrrNO5wYK3cHcukCI\/9liJCLyK0LxHi1+7zX7yI3MloqSMwuSzFqN1USwe4dHr7lDfKaAh36KjJdsblm5nK5SMcgkpYJkknmPysEl5lVXTDu+CGZTZGJ55fitF9Drgv8T0iv62V8odEyQSDGrWTWRrCnCyVjhLymgLCbyXRFcLaRzMhpiSDppJVE8V7Hqw1S4UCiAwPOPApPk1roO\/oQHQ+TGzmRC9Lbu+0cjCncowPorLKHzIZBU\/VVWTieC4JtNUtZmYK3jMgF6Y6NSTHmOV5tMEJ+rNlFbKlkYSWaqt3k1gWRcY81lGn6SkCzRCpI9bK6YN6+NGe\/IKshjLh5sybsn5HrxiAiw\/fkVRhEKsg461qPwtMspRjnDQsCMdL4K98h141brVKmj+yWE9kUroyOMou9DNP9b3J2wCpmlpDni3Tc6kcykCW3Hm+gWVyDLK7uNbSoiSxC\/EQHmrVHyPJMal3hImRTD3gU43G87op2E0MSSYQYhjmXnarOK8xwalzQ2DJrMPNr8lxBVNykcXsYZ7z7dCtn2xF9veS1HdFEyCl2M356EwNNiTVoyMVwriCFnmkkzd0427\/nQQw5dbuyncWQRNVkSUG8AjG4ILsm6YT1uW597Bk0b3KcURcIthkd90I89lFV2xK6IOn11goUtVaPTAAHr250ICIuRxb1IMYNP4Jbf25DsF9qmn2ZWczKhXIdQeiCcFv4iQ7JYSrPIpPJn5tJ5Es4yH9EPyBFrom8z4ML8QUM9K7JD254mqo7glA7dXk7WaVL97VIoKLrF2zdmvrv76xadZ9+8dv+FkcfIS\/4ne\/U1uQIvlER\/cRO8juOUAVB87IGZ\/Sd5HqhjHa+SxqpVGE2r4g4Iuw2fMo3VZ+tAZq5Z22hFZHGeh0Mti2hCoKO91G09cvI9cLhcd61dIY4lUNEeMmGDkPwIpqmyGf2wiI0QbKJ\/ottpvldxi9XlbzDMWsDkZ+EYMOIJrkqfkoRWqdeYfq1ZPrBTQy5Ev56s5T9yFQUQxKaID6bKjd+gE\/6UYiwAimsXIQ9ZQmtyTIS5qso5jpew+yuVPShrcOpZ8mf8oQiiFxQIDj\/Lbn+EOx1\/NxhV7QdUS9SawfCabK06q3KfjmKZi4zq2esR87cTUcxJKEIgpHyB8j0DLKmFDprK5fLyQiZtoTVqXu+dnUaXVSOkDmtCVyQ3NqcXIm4wPG8Mx7rmpZN1P8TuCAnZ8x+P5l+OHnm9avpTOCCaNx22w5pMl6kctoTfB\/icXX5maBDHyNz2hNGp+7rDiUJ0t2WZlarV++qXmFuB9pFkJZESF\/vwEIjYf7lvO5\/NbUoL0jCEORCKj2DJivyCDHi5jpdr8jZyUtwRlydSea9LB8KnTAE8b+ZmGAxsiKhei88Z8PkVsFgtj+dtCLZ9qkeYQhSd3ZvUjQ2k6xQydySX4zIOISInPReeG6LITJbRhiCdFPph0Z+xxfoK3JC4yOIjA9S1dlw9oA1lLmMvJYRqCC5XE42Pf6bH8Fqb7\/UJKl4YZGRNOVdWN9waiaCiNllFTOfJLelhBEhjTAvnbbeQnZgpOPW7RioPoEjXnPvFLmIrlAyPN57GD5BR0gZRUMpLB9ngW0SJneRMxLWQRzs+tsxcZZqt0V0YUTICSp9Ij5NRsPI2+WQQW3TmP0I3u9DVD0p1YV0Ldqbtx5hCCKnbhthOTKghqJECiE77W597GX0B27Lh563mbbYHMoGckNp0AQuCEbdx8n0DZqYndl4\/xXkuiL3ZIQQm6UQcGWnXXcTAny2h2OivGSglPa1Z1aUBD6nLgddtfJ8j8jdEzbjwO3eMrTpH07V\/5DRMCv22nUYyK2E67mZw2e6E533WnLbljAEMfDlPW1M6YGDOJKvcE2MQYBZ8OV1svdUn\/EOPg5b1ynrfYPvQ7i\/PQ1duBzvtwJiyC04rsHDrxi\/t4V2aSctvg48QuQU7mszumXHHtqaL4\/0W6VMy7bIaJTAIyS3M3cSxU8dryU8h877uk4UQxJG2isbba837AcKsrRvQoiFZin7IFV1HKE1K+jcn4Awnndvawb8nf0atzdh1P0MVXUsoQmCQd5yvHvYu+o8BTFKSGeb3qSmXQi1480k83cgQ7qd3ODg7ICwIcSQsZdqpgyhZ0IYScu9qrxtj+TOPptr3x8opn9O\/pQjktRUbpOkCVtGSs393Osg\/w\/UHtHFf1woGMecqqlLJIKcBtFyI1LSG9Du3wD3XKf2LP6J545ozD6AAd0Ir4gRa3vmKD03LYhUkDNJJge7kaa+OWaX59gx7ficOf8ezeVyNj2tUCgUCoVCoVAoFAqFQqFQKBQK7zD2H1oPDEpzIUUFAAAAAElFTkSuQmCC&#039;\/&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;span\\u00a0style=\\&quot;font-size:\\u00a026px;\\&quot;&gt;\\u00a0www.etemkeskin.com&lt;\/span&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/a&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;\\u00a0&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0class=\\&quot;col\\u00a0company-details\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;455\\u00a0Foggy\\u00a0Heights,\\u00a0AZ\\u00a085004,\\u00a0US&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;(123)\\u00a0456-789&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;etemkeskin@example.com&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/header&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;main&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;INVOICE\\u00a0TO:&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;h2&gt;John\\u00a0Doe&lt;\/h2&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;796\\u00a0Silver\\u00a0Harbour,\\u00a0TX\\u00a079273,\\u00a0US&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;&lt;a\\u00a0href=\\&quot;mailto:john@example.com\\&quot;&gt;john@example.com&lt;\/a&gt;&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0class=\\&quot;col\\u00a0invoice-details\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;h1\\u00a0\\u00a0style=\\&quot;color:\\u00a0darkcyan;\\&quot;&gt;INVOICE\\u00a03-2-1&lt;\/h1&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0&gt;Date\\u00a0of\\u00a0Invoice:\\u00a001\/10\/2018&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div\\u00a0&gt;Due\\u00a0Date:\\u00a030\/10\/2018&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;table\\u00a0border=\\&quot;0\\&quot;\\u00a0cellspacing=\\&quot;0\\&quot;\\u00a0cellpadding=\\&quot;0\\&quot;&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;thead&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;th&gt;#&lt;\/th&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;th\\u00a0class=\\&quot;text-left\\&quot;&gt;DESCRIPTION&lt;\/th&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;th\\u00a0class=\\&quot;text-right\\&quot;&gt;HOUR\\u00a0PRICE&lt;\/th&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;th\\u00a0class=\\&quot;text-right\\&quot;&gt;HOURS&lt;\/th&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;th\\u00a0class=\\&quot;text-right\\&quot;&gt;TOTAL&lt;\/th&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/thead&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tbody&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0class=\\&quot;no\\&quot;&gt;01&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0class=\\&quot;text-left\\&quot;&gt;&lt;h3&gt;Website\\u00a0Design&lt;\/h3&gt;Creating\\u00a0a\\u00a0recognizable\\u00a0design\\u00a0solution\\u00a0based\\u00a0on\\u00a0the\\u00a0company&#039;s\\u00a0existing\\u00a0visual\\u00a0identity&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0class=\\&quot;unit\\&quot;&gt;$40.00&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0class=\\&quot;qty\\&quot;&gt;30&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0class=\\&quot;total\\&quot;&gt;$1,200.00&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tbody&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tfoot&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;SUBTOTAL&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td&gt;$1,200.00&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;TAX\\u00a025%&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td&gt;$300.00&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td\\u00a0colspan=\\&quot;2\\&quot;&gt;GRAND\\u00a0TOTAL&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;td&gt;$1,500.00&lt;\/td&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tr&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/tfoot&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/table&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/main&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;footer&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0Invoice\\u00a0was\\u00a0created\\u00a0on\\u00a0a\\u00a0computer\\u00a0and\\u00a0is\\u00a0valid\\u00a0without\\u00a0the\\u00a0signature\\u00a0and\\u00a0seal.&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/footer&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;!--DO\\u00a0NOT\\u00a0DELETE\\u00a0THIS\\u00a0div.\\u00a0IT\\u00a0is\\u00a0responsible\\u00a0for\\u00a0showing\\u00a0footer\\u00a0always\\u00a0at\\u00a0the\\u00a0bottom--&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;div&gt;&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;\/div&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;br&gt;&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0&lt;button\\u00a0type=\\&quot;button\\&quot;\\u00a0onclick=\\&quot;convertHTMLToPDF()\\&quot;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0style=\\&quot;margin-left:\\u00a0350px;padding:\\u00a07px;\\u00a0color:\\u00a0white;\\u00a0background-color:\\u00a0darkslategrey;\\&quot;&gt;PDF\\u00a0olarak\\u00a0Kaydet&lt;\/button&gt;&lt;br&gt;&lt;\/body&gt;&lt;br&gt;&lt;script\\u00a0src=\\&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.3.1\/jspdf.umd.min.js\\&quot;&gt;&lt;\/script&gt;&lt;br&gt;&lt;script\\u00a0type=\\&quot;text\/javascript\\&quot;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0src=\\&quot;.\/html2canvas.js\\&quot;&gt;&lt;\/script&gt;&lt;br&gt;&lt;script&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0function\\u00a0convertHTMLToPDF()\\u00a0{&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0const\\u00a0{\\u00a0jsPDF\\u00a0}\\u00a0=\\u00a0window.jspdf;&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0var\\u00a0doc\\u00a0=\\u00a0new\\u00a0jsPDF(&#039;l&#039;,\\u00a0&#039;mm&#039;,\\u00a0[1200,\\u00a01810]);&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0var\\u00a0pdfjs\\u00a0=\\u00a0document.querySelector(&#039;#html-template&#039;);&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0doc.html(pdfjs,\\u00a0{&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0callback:\\u00a0function(doc)\\u00a0{&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0doc.save(\\&quot;output.pdf\\&quot;);&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0},&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0x:\\u00a010,&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0\\u00a0y:\\u00a010&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0});&lt;br&gt;&lt;br&gt;\\u00a0\\u00a0\\u00a0\\u00a0doc.output(&#039;dataurlnewwindow&#039;);&lt;br&gt;}&lt;br&gt;&lt;br&gt;&lt;\/script&gt;&lt;br&gt;&lt;\/html&gt;HTML&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div id=&quot;html-template&quot;&gt;\n        &lt;div style=&quot;margin-top: 50px;margin-left: 50px;&quot;&gt;\n            &lt;div style=&quot;min-width: 600px&quot;&gt;\n                &lt;header&gt;\n                    &lt;div class=&quot;row&quot;&gt;\n                        &lt;div class=&quot;col&quot;&gt;\n                            &lt;a target=&quot;_blank&quot; href=&quot;https:\/\/etemkeskin.com&quot;&gt;\n                    \t     &lt;img style=&quot;max-width: 70px;&quot; src='data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABlCAYAAAC7vkbxAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAniSURBVHhe7Z17jBtHHcdndn0Jl0fbS6kE4tG0ShGEh0ppCSRqkFKC2rS0SiEIhCiPiiiEXG3n7LWTtMWFkPOuL2dfLkmViJbyKIGmQERaFbW0PC99ENI\/qrQIUlqpagjVRaAm9NqcvcN3vL9Awp29u\/bu2r6bj+Sb32\/s89n73d\/Mb3Zm55hCoVAoFAqFQqFQKBQKhUKhUDQCp3LKsuHrW84v67F5XBc9gvF5TLAeLsSoptujmm0f21La9Hd6aVsw5QTp6xu4UK9UlsI8\/XiXrK\/DSxDqEITaUxgyfkJ1LWPKCGIkzM+j+CIey6sVDSAE\/7PG7fVmKfsQVUVORwuS\/Vp\/T2WmvpEzIYW4wKkNAM5SVjGzlbxI0ansOIykuVbofB\/OqKvgznZqA+MTSxYtPz7y5K+eIj8yOi5C0knrY+iUvwXzSqcmPLgtrjS3Zf9AbiRoVHYE6CcSEOM3MEMXQyI0HiczMjomQjKJ\/F3Ihr5Cbi3G8TgI0Y7hm83F62WG9c7qMw0iKnxBYdh4ntzQaXtBssn+BbbQ7oX5YadmUg4hQ7JePDr\/\/r17P1OhuiqpROHjGrNvgylTYP8I1msNZbaTFzptLUg20T+\/IvSHOBfvpqqJCJbFATPJq4kRN+\/Gt\/0yuZ5BlO0vlIzryQ2dtu1DjF7z7TbT9tcR4wTO\/Ku8iCHB62Rz9zvH8w5S6nPIjIS2FGRj4ttvRUK+H+b7nJoJjCIDujpf2vAY+Z6AgHeQ6R3BlCBlHrsfxaWONxGctTchHT1ArmdIwOcczxuI0FNkRkLbCYJs6rs4KxeTOwHBeVOXNiDm42R6An3IKJmR0FaCYJyxAQfgS+ROxn2FolEkuzE4+ytZXpmegqTj1qdQbHG8STlR1mIpshsGKfQrZHoCJ8j0G6nLS+Zoq+8hd1Iw2EsPDva9RG7DoMmaT6YnRJk\/SmYktIUgeqUyiGKO400CZy+YQ9ld5DWHYJeQ5YWDA9vTL5AdCS0XxEhYq1Hc6Hg12UFl82hsEVmuIJruJjMyWiqIbKpwyrrNO5wYK3cHcukCI\/9liJCLyK0LxHi1+7zX7yI3MloqSMwuSzFqN1USwe4dHr7lDfKaAh36KjJdsblm5nK5SMcgkpYJkknmPysEl5lVXTDu+CGZTZGJ55fitF9Drgv8T0iv62V8odEyQSDGrWTWRrCnCyVjhLymgLCbyXRFcLaRzMhpiSDppJVE8V7Hqw1S4UCiAwPOPApPk1roO\/oQHQ+TGzmRC9Lbu+0cjCncowPorLKHzIZBU\/VVWTieC4JtNUtZmYK3jMgF6Y6NSTHmOV5tMEJ+rNlFbKlkYSWaqt3k1gWRcY81lGn6SkCzRCpI9bK6YN6+NGe\/IKshjLh5sybsn5HrxiAiw\/fkVRhEKsg461qPwtMspRjnDQsCMdL4K98h141brVKmj+yWE9kUroyOMou9DNP9b3J2wCpmlpDni3Tc6kcykCW3Hm+gWVyDLK7uNbSoiSxC\/EQHmrVHyPJMal3hImRTD3gU43G87op2E0MSSYQYhjmXnarOK8xwalzQ2DJrMPNr8lxBVNykcXsYZ7z7dCtn2xF9veS1HdFEyCl2M356EwNNiTVoyMVwriCFnmkkzd0427\/nQQw5dbuyncWQRNVkSUG8AjG4ILsm6YT1uW597Bk0b3KcURcIthkd90I89lFV2xK6IOn11goUtVaPTAAHr250ICIuRxb1IMYNP4Jbf25DsF9qmn2ZWczKhXIdQeiCcFv4iQ7JYSrPIpPJn5tJ5Es4yH9EPyBFrom8z4ML8QUM9K7JD254mqo7glA7dXk7WaVL97VIoKLrF2zdmvrv76xadZ9+8dv+FkcfIS\/4ne\/U1uQIvlER\/cRO8juOUAVB87IGZ\/Sd5HqhjHa+SxqpVGE2r4g4Iuw2fMo3VZ+tAZq5Z22hFZHGeh0Mti2hCoKO91G09cvI9cLhcd61dIY4lUNEeMmGDkPwIpqmyGf2wiI0QbKJ\/ottpvldxi9XlbzDMWsDkZ+EYMOIJrkqfkoRWqdeYfq1ZPrBTQy5Ev56s5T9yFQUQxKaID6bKjd+gE\/6UYiwAimsXIQ9ZQmtyTIS5qso5jpew+yuVPShrcOpZ8mf8oQiiFxQIDj\/Lbn+EOx1\/NxhV7QdUS9SawfCabK06q3KfjmKZi4zq2esR87cTUcxJKEIgpHyB8j0DLKmFDprK5fLyQiZtoTVqXu+dnUaXVSOkDmtCVyQ3NqcXIm4wPG8Mx7rmpZN1P8TuCAnZ8x+P5l+OHnm9avpTOCCaNx22w5pMl6kctoTfB\/icXX5maBDHyNz2hNGp+7rDiUJ0t2WZlarV++qXmFuB9pFkJZESF\/vwEIjYf7lvO5\/NbUoL0jCEORCKj2DJivyCDHi5jpdr8jZyUtwRlydSea9LB8KnTAE8b+ZmGAxsiKhei88Z8PkVsFgtj+dtCLZ9qkeYQhSd3ZvUjQ2k6xQydySX4zIOISInPReeG6LITJbRhiCdFPph0Z+xxfoK3JC4yOIjA9S1dlw9oA1lLmMvJYRqCC5XE42Pf6bH8Fqb7\/UJKl4YZGRNOVdWN9waiaCiNllFTOfJLelhBEhjTAvnbbeQnZgpOPW7RioPoEjXnPvFLmIrlAyPN57GD5BR0gZRUMpLB9ngW0SJneRMxLWQRzs+tsxcZZqt0V0YUTICSp9Ij5NRsPI2+WQQW3TmP0I3u9DVD0p1YV0Ldqbtx5hCCKnbhthOTKghqJECiE77W597GX0B27Lh563mbbYHMoGckNp0AQuCEbdx8n0DZqYndl4\/xXkuiL3ZIQQm6UQcGWnXXcTAny2h2OivGSglPa1Z1aUBD6nLgddtfJ8j8jdEzbjwO3eMrTpH07V\/5DRMCv22nUYyK2E67mZw2e6E533WnLbljAEMfDlPW1M6YGDOJKvcE2MQYBZ8OV1svdUn\/EOPg5b1ynrfYPvQ7i\/PQ1duBzvtwJiyC04rsHDrxi\/t4V2aSctvg48QuQU7mszumXHHtqaL4\/0W6VMy7bIaJTAIyS3M3cSxU8dryU8h877uk4UQxJG2isbba837AcKsrRvQoiFZin7IFV1HKE1K+jcn4Awnndvawb8nf0atzdh1P0MVXUsoQmCQd5yvHvYu+o8BTFKSGeb3qSmXQi1480k83cgQ7qd3ODg7ICwIcSQsZdqpgyhZ0IYScu9qrxtj+TOPptr3x8opn9O\/pQjktRUbpOkCVtGSs393Osg\/w\/UHtHFf1woGMecqqlLJIKcBtFyI1LSG9Du3wD3XKf2LP6J545ozD6AAd0Ir4gRa3vmKD03LYhUkDNJJge7kaa+OWaX59gx7ficOf8ezeVyNj2tUCgUCoVCoVAoFAqFQqFQKBQK7zD2H1oPDEpzIUUFAAAAAElFTkSuQmCC'\/&gt;\n                             &lt;span style=&quot;font-size: 26px;&quot;&gt; www.etemkeskin.com&lt;\/span&gt;               \n                           &lt;\/a&gt;\n                        &lt;\/div&gt; &lt;br&gt;\n                        &lt;div class=&quot;col company-details&quot;&gt;\n                            &lt;div&gt;455 Foggy Heights, AZ 85004, US&lt;\/div&gt;\n                            &lt;div&gt;(123) 456-789&lt;\/div&gt;\n                            &lt;div&gt;etemkeskin@example.com&lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/header&gt;\n                &lt;main&gt;\n                    &lt;div&gt;\n                        &lt;div&gt;\n                            &lt;div&gt;INVOICE TO:&lt;\/div&gt;\n                            &lt;h2&gt;John Doe&lt;\/h2&gt;\n                            &lt;div&gt;796 Silver Harbour, TX 79273, US&lt;\/div&gt;\n                            &lt;div&gt;&lt;a href=&quot;mailto:john@example.com&quot;&gt;john@example.com&lt;\/a&gt;&lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=&quot;col invoice-details&quot;&gt;\n                            &lt;h1  style=&quot;color: darkcyan;&quot;&gt;INVOICE 3-2-1&lt;\/h1&gt;\n                            &lt;div &gt;Date of Invoice: 01\/10\/2018&lt;\/div&gt;\n                            &lt;div &gt;Due Date: 30\/10\/2018&lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    &lt;table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;\n                        &lt;thead&gt;\n                            &lt;tr&gt;\n                                &lt;th&gt;#&lt;\/th&gt;\n                                &lt;th class=&quot;text-left&quot;&gt;DESCRIPTION&lt;\/th&gt;\n                                &lt;th class=&quot;text-right&quot;&gt;HOUR PRICE&lt;\/th&gt;\n                                &lt;th class=&quot;text-right&quot;&gt;HOURS&lt;\/th&gt;\n                                &lt;th class=&quot;text-right&quot;&gt;TOTAL&lt;\/th&gt;\n                            &lt;\/tr&gt;\n                        &lt;\/thead&gt;\n                        &lt;tbody&gt;\n                            &lt;tr&gt;\n                                &lt;td class=&quot;no&quot;&gt;01&lt;\/td&gt;\n                                &lt;td class=&quot;text-left&quot;&gt;&lt;h3&gt;Website Design&lt;\/h3&gt;Creating a recognizable design solution based on the company's existing visual identity&lt;\/td&gt;\n                                &lt;td class=&quot;unit&quot;&gt;$40.00&lt;\/td&gt;\n                                &lt;td class=&quot;qty&quot;&gt;30&lt;\/td&gt;\n                                &lt;td class=&quot;total&quot;&gt;$1,200.00&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                        &lt;\/tbody&gt;\n                        &lt;tfoot&gt;\n                            &lt;tr&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;&lt;\/td&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;SUBTOTAL&lt;\/td&gt;\n                                &lt;td&gt;$1,200.00&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;&lt;\/td&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;TAX 25%&lt;\/td&gt;\n                                &lt;td&gt;$300.00&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                            &lt;tr&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;&lt;\/td&gt;\n                                &lt;td colspan=&quot;2&quot;&gt;GRAND TOTAL&lt;\/td&gt;\n                                &lt;td&gt;$1,500.00&lt;\/td&gt;\n                            &lt;\/tr&gt;\n                        &lt;\/tfoot&gt;\n                    &lt;\/table&gt;\n                &lt;\/main&gt;\n                &lt;footer&gt;\n                    Invoice was created on a computer and is valid without the signature and seal.\n                &lt;\/footer&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\t&lt;\/div&gt;\n    \n    &lt;br&gt;&lt;br&gt;\n    &lt;button type=&quot;button&quot; onclick=&quot;convertHTMLToPDF()&quot;\n    style=&quot;margin-left: 350px;padding: 7px; color: white; background-color: darkslategrey;&quot;&gt;PDF olarak Kaydet&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.3.1\/jspdf.umd.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot;\n\tsrc=&quot;.\/html2canvas.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n    function convertHTMLToPDF() {\n      const { jsPDF } = window.jspdf;\n\n      var doc = new jsPDF('l', 'mm', [1200, 1810]);\n      var pdfjs = document.querySelector('#html-template');\n\n      doc.html(pdfjs, {\n          callback: function(doc) {\n              doc.save(&quot;output.pdf&quot;);\n          },\n          x: 10,\n          y: 10\n      });\n\n      doc.output('dataurlnewwindow');\n  }\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"947\" height=\"722\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image-2.png\" alt=\"\" class=\"wp-image-1723\"\/><figcaption>Image of generated HTML file<\/figcaption><\/figure>\n\n\n\n<p>We run the HTML file and click the <strong>save as PDF<\/strong> button. The generated PDF file will be saved on our computer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1877\" height=\"819\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image-1.png\" alt=\"\" class=\"wp-image-1694\"\/><figcaption>PDF file produced from HTML file<\/figcaption><\/figure>\n\n\n\n<p>In this post, I explained how to export PDF file at web application quickly and simply. <\/p>\n\n\n\n<p>Good luck\u2026<\/p>\n\n\n\n<p><strong>Sources<\/strong><\/p>\n\n\n\n<ol><li>https:\/\/github.com\/MrRio\/jsPDF<\/li><li>https:\/\/github.com\/niklasvh\/html2canvas<\/li><li>https:\/\/codebeautify.org\/image-to-base64-converter<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>There may be situations where it is necessary to produce PDF files while developing a web application. It may need to be printed especially in cases such as reporting and invoicing. PDF file creation in the web application can be performed in two ways. On the client-side and on the server-side ( backend). In this [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[50],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create PDF file from HTML using jsPDF Javascript Library on Client-Side - blog website<\/title>\n<meta name=\"description\" content=\"There may be situations where it is necessary to produce PDF files while developing a web application. It may need to be printed especially in cases such as reporting and invoicing.PDF file creation in the web application can be performed in two ways. On the client-side and on the server-side ( backend). In this post, I will explain how to create a PDF file from HTML template using javascript libraries on the client-side. If you want to generate PDF from HTML template on server side, you can use weasyprint library in Python and DOMPDF in PHP.Before moving on to our example, make sure you have npm(node package manager) installed on your computer.In our example, we will use 2 Javascript libraries.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create PDF file from HTML using jsPDF Javascript Library on Client-Side - blog website\" \/>\n<meta property=\"og:description\" content=\"There may be situations where it is necessary to produce PDF files while developing a web application. It may need to be printed especially in cases such as reporting and invoicing.PDF file creation in the web application can be performed in two ways. On the client-side and on the server-side ( backend). In this post, I will explain how to create a PDF file from HTML template using javascript libraries on the client-side. If you want to generate PDF from HTML template on server side, you can use weasyprint library in Python and DOMPDF in PHP.Before moving on to our example, make sure you have npm(node package manager) installed on your computer.In our example, we will use 2 Javascript libraries.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-06T19:48:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-06T19:48:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image-2.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image-2.png\",\"width\":947,\"height\":722},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/\",\"name\":\"Create PDF file from HTML using jsPDF Javascript Library on Client-Side - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/#primaryimage\"},\"datePublished\":\"2021-06-06T19:48:14+00:00\",\"dateModified\":\"2021-06-06T19:48:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"There may be situations where it is necessary to produce PDF files while developing a web application. It may need to be printed especially in cases such as reporting and invoicing.PDF file creation in the web application can be performed in two ways. On the client-side and on the server-side ( backend). In this post, I will explain how to create a PDF file from HTML template using javascript libraries on the client-side. If you want to generate PDF from HTML template on server side, you can use weasyprint library in Python and DOMPDF in PHP.Before moving on to our example, make sure you have npm(node package manager) installed on your computer.In our example, we will use 2 Javascript libraries.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/06\/06\/create-pdf-file-from-html-using-jspdf-javascript-library-on-client-side\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create PDF file from HTML using jsPDF Javascript Library on Client-Side\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1668"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=1668"}],"version-history":[{"count":47,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1668\/revisions"}],"predecessor-version":[{"id":1725,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1668\/revisions\/1725"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}