Welcome folks today in this blog post we will be converting html5 & css template to pdf document in browser using dompdf library. All the full source code of the application is shown below.
Get Started
In order to get started you need to download the dompdflibrary using the composer command as shown below
composer require dompdf/dompdf
After that it will create the vendor folder and it will contain all the libraries of DOMPDF as shown below
Now we need to create the index.php file inside the root directory and inside it we need to include the vendor.php file which contains the library code
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php // Include the DOMPDF autoloader require_once './vendor/autoload.php'; // Reference the Dompdf namespace use Dompdf\Dompdf; // Instantiate and use the dompdf class $dompdf = new Dompdf(); $dompdf->loadHtml('<h1>Hello World!</h1>'); // (Optional) Setup the paper size and orientation $dompdf->setPaper('A4', 'landscape'); // Render the HTML as PDF $dompdf->render(); // Output the generated PDF to Browser $dompdf->stream(); |
As you can see we are importing the vendor file of the dompdf library and then we are declaring the constructor of the dompdf library and then we are using the loadHtml() method to convert the raw html to pdf document and then we are using the setPaper() method to set the size of the pdf document. Here we are giving the size to be A4 and the orientation will be landscape. And then lastly we are rendering the pdf document in the browser using the render() method. And lastly we are using the stream() method to show the pdf document inside the browser.
Loading the HTML5 Template in PDF Document
Now guys just create a index.html file and copy paste the following code which contains the html and css code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> /** * 01/28/2016 * This pen is years old, and watching at the code after all * those years made me fall from my chair, so I: * - changed all IDs to classes * - converted all units to pixels and em units * - changed all global elements to classes or children of * .login * - cleaned the syntax to be more consistent * - added a lot of spaces that I so hard tried to avoid * a few years ago * (because it's cool to not use them) * - and probably something else that I can't remember anymore * * I sticked to the same philosophy, meaning: * - the design is almost the same * - only pure HTML and CSS * - no frameworks, preprocessors or resets */ /* 'Open Sans' font from Google Fonts */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); body { background: #456; font-family: 'Open Sans', sans-serif; } .login { width: 400px; margin: 16px auto; font-size: 16px; } /* Reset top and bottom margins from certain elements */ .login-header, .login p { margin-top: 0; margin-bottom: 0; } /* The triangle form is achieved by a CSS hack */ .login-triangle { width: 0; margin-right: auto; margin-left: auto; border: 12px solid transparent; border-bottom-color: #28d; } .login-header { background: #28d; padding: 20px; font-size: 1.4em; font-weight: normal; text-align: center; text-transform: uppercase; color: #fff; } .login-container { background: #ebebeb; padding: 12px; } /* Every row inside .login-container is defined with p tags */ .login p { padding: 12px; } .login input { box-sizing: border-box; display: block; width: 100%; border-width: 1px; border-style: solid; padding: 16px; outline: 0; font-family: inherit; font-size: 0.95em; } .login input[type="email"], .login input[type="password"] { background: #fff; border-color: #bbb; color: #555; } /* Text fields' focus effect */ .login input[type="email"]:focus, .login input[type="password"]:focus { border-color: #888; } .login input[type="submit"] { background: #28d; border-color: transparent; color: #fff; cursor: pointer; } .login input[type="submit"]:hover { background: #17c; } /* Buttons' focus effect */ .login input[type="submit"]:focus { border-color: #05a; } </style> <body> <div class="login"> <div class="login-triangle"></div> <h2 class="login-header">Log in</h2> <form class="login-container"> <p><input type="email" placeholder="Email"></p> <p><input type="password" placeholder="Password"></p> <p><input type="submit" value="Log in"></p> </form> </div> </body> </html> |
Now we can load this file inside the pdf document in dompdf using the load_html() method as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // Include the DOMPDF autoloader require_once './vendor/autoload.php'; // Reference the Dompdf namespace use Dompdf\Dompdf; // Instantiate and use the dompdf class $dompdf = new Dompdf(); $html = file_get_contents("index.html"); $dompdf->loadHtml($html); // (Optional) Setup the paper size and orientation $dompdf->setPaper('A4', 'landscape'); // Render the HTML as PDF $dompdf->render(); // Output the generated PDF to Browser $dompdf->stream(); |
As you can see we are first of all getting the contents of the pdf template file which is index.html file and then we are using the loadHtml() method to load the html with css. And now if you see the result of pdf document you will see the below result
