{"id":1763,"date":"2021-06-20T12:29:49","date_gmt":"2021-06-20T09:29:49","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1763"},"modified":"2021-06-20T12:34:04","modified_gmt":"2021-06-20T09:34:04","slug":"istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/","title":{"rendered":"\u0130stemci Taraf\u0131nda jsPDF Javascript K\u00fct\u00fcphanesi kullanarak HTML&#8217;den PDF Dosyas\u0131 Olu\u015fturma"},"content":{"rendered":"\n<p>Web uygulamas\u0131 geli\u015ftirirken PDF dosyalar \u00fcretmek gereken durumlar olabilir. \u00d6zellikle <strong>raporlama, faturaland\u0131rma<\/strong> gibi durumlarda bunlar\u0131n bas\u0131lmas\u0131 gerekebilir.<\/p>\n\n\n\n<p>Web uygulamas\u0131nda PDF dosya olu\u015fturma iki \u015fekilde ger\u00e7ekle\u015ftirilebilinir. <strong>\u0130stemci(client-side)<\/strong> taraf\u0131nda ve <strong>sunucu(server veya backend)<\/strong> taraf\u0131nda. Bu yaz\u0131da kullan\u0131c\u0131 taraf\u0131nda yani browserda javascript k\u00fct\u00fcphaneleri kullanarak <strong>HTML template<\/strong> ile nas\u0131l <strong>PDF<\/strong> dosyas\u0131 olu\u015fturulaca\u011f\u0131n\u0131 anlataca\u011f\u0131m. E\u011fer server taraf\u0131nda HTML templateten PDF \u00fcretmek istiyorsan\u0131z Python&#8217; da <strong>weasyprint<\/strong> k\u00fct\u00fcphanesini, PHP&#8217; de <strong>DOMPDF<\/strong> kullanabilirsiniz.<\/p>\n\n\n\n<p>\u00d6rne\u011fimize ge\u00e7meden \u00f6nce bilgisayar\u0131n\u0131zda <strong>npm(node paket y\u00f6neticisi)<\/strong>&#8216; nin y\u00fckl\u00fc oldu\u011fundan emin olun. <\/p>\n\n\n\n<p>\u00d6rne\u011fimizde <strong>2 <\/strong>tane Javascript k\u00fct\u00fcphanesini kullanaca\u011f\u0131z. <\/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 istemci <\/strong>taraf\u0131nda PDF dok\u00fcmanlar \u00fcretmek i\u00e7in kullan\u0131lan bir javascript k\u00fct\u00fcphanesidir. Dok\u00fcmantasyonu olduk\u00e7a iyidir. <strong>jsPDF<\/strong>, Asenkron mod\u00fcl tan\u0131mlama (AMD) standartlar\u0131na g\u00f6re yaz\u0131lm\u0131\u015ft\u0131r. K\u00fct\u00fcphaneyi a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak projemize y\u00fckleyece\u011fiz.<\/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>E\u011fer k\u00fct\u00fcphaneti <strong>cdn<\/strong> olarak projeye dahil etmek istiyorsan\u0131z a\u015fa\u011f\u0131daki script tagini kullanabilirsiniz.<\/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><strong>html2canvas <\/strong>k\u00fct\u00fcphanesini y\u00fcklemek i\u00e7in github&#8217; dan bilgisayar\u0131m\u0131za y\u00fckleyece\u011fiz.<\/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>Daha sonra bilgisayar\u0131m\u0131za y\u00fckledi\u011fimiz klas\u00f6rde <strong>terminal <\/strong>ekran\u0131 a\u00e7\u0131p ba\u011f\u0131ml\u0131 dosyalar\u0131 yani <strong>dependency<\/strong>&#8216; leri y\u00fckl\u00fcyoruz.<\/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>En sonda taray\u0131c\u0131 paketi olu\u015fturmak i\u00e7in build ediyoruz.(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>html2canvas &nbsp;DOM&#8217; a ve \u00f6\u011felere uygulanan farkl\u0131 stilleri okuyarak ge\u00e7erli sayfay\u0131 bir<strong> tuval g\u00f6r\u00fcnt\u00fcs\u00fc (canvas image) <\/strong>olarak i\u015fler.<\/p>\n\n\n\n<h2>\u00d6rnek<\/h2>\n\n\n\n<p>Bu yaz\u0131daki \u00f6rne\u011fi tek sayfa HTML dosyas\u0131na toparlad\u0131m.<\/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=\"852\" height=\"657\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image.png\" alt=\"\" class=\"wp-image-1693\"\/><figcaption>Olu\u015fturulan HTML dosyan\u0131n G\u00f6r\u00fcnt\u00fcs\u00fc<\/figcaption><\/figure>\n\n\n\n<p>HTML dosyas\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131yoruz ve PDF olarak kaydet butonuna bas\u0131yoruz. Olu\u015fturulan PDF dosya bilgisayar\u0131m\u0131za kaydedilecek. <\/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>HTML dosyadan \u00fcretilmi\u015f PDF dosyas\u0131 <\/figcaption><\/figure>\n\n\n\n<p>Bu yaz\u0131da bir web uygulamas\u0131na h\u0131zl\u0131 ve basit bir \u015fekilde PDF dosya olu\u015fturma nas\u0131l entegre edilece\u011fini anlatt\u0131m. Ba\u015far\u0131lar dilerim&#8230;<\/p>\n\n\n\n<p><strong>Kaynaklar<\/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>Web uygulamas\u0131 geli\u015ftirirken PDF dosyalar \u00fcretmek gereken durumlar olabilir. \u00d6zellikle raporlama, faturaland\u0131rma gibi durumlarda bunlar\u0131n bas\u0131lmas\u0131 gerekebilir. Web uygulamas\u0131nda PDF dosya olu\u015fturma iki \u015fekilde ger\u00e7ekle\u015ftirilebilinir. \u0130stemci(client-side) taraf\u0131nda ve sunucu(server veya backend) taraf\u0131nda. Bu yaz\u0131da kullan\u0131c\u0131 taraf\u0131nda yani browserda javascript k\u00fct\u00fcphaneleri kullanarak HTML template ile nas\u0131l PDF dosyas\u0131 olu\u015fturulaca\u011f\u0131n\u0131 anlataca\u011f\u0131m. E\u011fer server taraf\u0131nda HTML templateten PDF [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[52],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u0130stemci Taraf\u0131nda jsPDF Javascript K\u00fct\u00fcphanesi kullanarak HTML&#039;den PDF Dosyas\u0131 Olu\u015fturma - blog website<\/title>\n<meta name=\"description\" content=\"Web uygulamas\u0131 geli\u015ftirirken PDF dosyalar \u00fcretmek gereken durumlar olabilir. \u00d6zellikle raporlama, faturaland\u0131rma gibi durumlarda bunlar\u0131n bas\u0131lmas\u0131 gerekebilir.Web uygulamas\u0131nda PDF dosya olu\u015fturma iki \u015fekilde ger\u00e7ekle\u015ftirilebilinir. \u0130stemci(client-side) taraf\u0131nda ve sunucu(server veya backend) taraf\u0131nda. Bu yaz\u0131da kullan\u0131c\u0131 taraf\u0131nda yani browserda javascript k\u00fct\u00fcphaneleri kullanarak HTML template ile nas\u0131l PDF dosyas\u0131 olu\u015fturulaca\u011f\u0131n\u0131 anlataca\u011f\u0131m. E\u011fer server taraf\u0131nda HTML templateten PDF \u00fcretmek istiyorsan\u0131z Python&#039; da weasyprint k\u00fct\u00fcphanesini, PHP&#039; de DOMPDF kullanabilirsiniz.\u00d6rne\u011fimize ge\u00e7meden \u00f6nce bilgisayar\u0131n\u0131zda npm(node paket y\u00f6neticisi)&#039; nin y\u00fckl\u00fc oldu\u011fundan emin olun. \u00d6rne\u011fimizde 2 tane Javascript k\u00fct\u00fcphanesini kullanaca\u011f\u0131z.\" \/>\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\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0130stemci Taraf\u0131nda jsPDF Javascript K\u00fct\u00fcphanesi kullanarak HTML&#039;den PDF Dosyas\u0131 Olu\u015fturma - blog website\" \/>\n<meta property=\"og:description\" content=\"Web uygulamas\u0131 geli\u015ftirirken PDF dosyalar \u00fcretmek gereken durumlar olabilir. \u00d6zellikle raporlama, faturaland\u0131rma gibi durumlarda bunlar\u0131n bas\u0131lmas\u0131 gerekebilir.Web uygulamas\u0131nda PDF dosya olu\u015fturma iki \u015fekilde ger\u00e7ekle\u015ftirilebilinir. \u0130stemci(client-side) taraf\u0131nda ve sunucu(server veya backend) taraf\u0131nda. Bu yaz\u0131da kullan\u0131c\u0131 taraf\u0131nda yani browserda javascript k\u00fct\u00fcphaneleri kullanarak HTML template ile nas\u0131l PDF dosyas\u0131 olu\u015fturulaca\u011f\u0131n\u0131 anlataca\u011f\u0131m. E\u011fer server taraf\u0131nda HTML templateten PDF \u00fcretmek istiyorsan\u0131z Python&#039; da weasyprint k\u00fct\u00fcphanesini, PHP&#039; de DOMPDF kullanabilirsiniz.\u00d6rne\u011fimize ge\u00e7meden \u00f6nce bilgisayar\u0131n\u0131zda npm(node paket y\u00f6neticisi)&#039; nin y\u00fckl\u00fc oldu\u011fundan emin olun. \u00d6rne\u011fimizde 2 tane Javascript k\u00fct\u00fcphanesini kullanaca\u011f\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T09:29:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-20T09:34:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image.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\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/06\/image.png\",\"width\":852,\"height\":657},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/\",\"name\":\"\\u0130stemci Taraf\\u0131nda jsPDF Javascript K\\u00fct\\u00fcphanesi kullanarak HTML'den PDF Dosyas\\u0131 Olu\\u015fturma - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/#primaryimage\"},\"datePublished\":\"2021-06-20T09:29:49+00:00\",\"dateModified\":\"2021-06-20T09:34:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Web uygulamas\\u0131 geli\\u015ftirirken PDF dosyalar \\u00fcretmek gereken durumlar olabilir. \\u00d6zellikle raporlama, faturaland\\u0131rma gibi durumlarda bunlar\\u0131n bas\\u0131lmas\\u0131 gerekebilir.Web uygulamas\\u0131nda PDF dosya olu\\u015fturma iki \\u015fekilde ger\\u00e7ekle\\u015ftirilebilinir. \\u0130stemci(client-side) taraf\\u0131nda ve sunucu(server veya backend) taraf\\u0131nda. Bu yaz\\u0131da kullan\\u0131c\\u0131 taraf\\u0131nda yani browserda javascript k\\u00fct\\u00fcphaneleri kullanarak HTML template ile nas\\u0131l PDF dosyas\\u0131 olu\\u015fturulaca\\u011f\\u0131n\\u0131 anlataca\\u011f\\u0131m. E\\u011fer server taraf\\u0131nda HTML templateten PDF \\u00fcretmek istiyorsan\\u0131z Python' da weasyprint k\\u00fct\\u00fcphanesini, PHP' de DOMPDF kullanabilirsiniz.\\u00d6rne\\u011fimize ge\\u00e7meden \\u00f6nce bilgisayar\\u0131n\\u0131zda npm(node paket y\\u00f6neticisi)' nin y\\u00fckl\\u00fc oldu\\u011fundan emin olun. \\u00d6rne\\u011fimizde 2 tane Javascript k\\u00fct\\u00fcphanesini kullanaca\\u011f\\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/06\/20\/istemci-tarafinda-jspdf-javascript-kutuphanesi-kullanarak-html-den-pdf-dosyasi-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\\u0130stemci Taraf\\u0131nda jsPDF Javascript K\\u00fct\\u00fcphanesi kullanarak HTML&#8217;den PDF Dosyas\\u0131 Olu\\u015fturma\"}]},{\"@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\/1763"}],"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=1763"}],"version-history":[{"count":3,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"predecessor-version":[{"id":1766,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1763\/revisions\/1766"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}