How to create HTML CSS with mPDF PHP Library
Step 1: index.php
After that update your database credentials in your .index file which is located in your project root.
<?php // first is import MPDF require_once './vendor/autoload.php'; $mpdf = new \Mpdf\Mpdf(); // book mark of pdf $mpdf->Bookmark('Start of the document'); //then let start us html for generate report // we need to use a variable for store the html //here is our report $html = ' <!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>MPDF</title> <!-- file css for style on report --> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="container"> <!-- so this row should be our header of report --> <div class="row"> <div class="header"> <div class="logo_description_report_header"> <img src="./images/logo.png" alt=""> <div class="brand_company"> For testing report MPDF </div> <div class="description"> <small>Testing purpose</small> </div> </div> </div> </div> <!-- body of report --> <div class="row"> <div class="body_report"> <div class="name_header"> <p>Name : Testing name</p> <p>Age : 12 </p> <p>Date of birth : 10/11/1999</p> <p>Test Date : 10/11/1999 </p> <p>School : RUPP </p> <p>Grade : Y1 </p> </div> <div class="Header_title"> <strong> Header of this </strong> </div> <div class="container_details"> <!-- it should be table of report --> <table> <thead> <tr> <td> Name </td> <td> Age </td> <td> Date of Birth </td> <td> Test Date </td> <td> School </td> <td> Grade </td> </tr> </thead> <tbody> <tr> <td> testing1 </td> <td> 10 </td> <td> 10/11/1999 </td> <td> 10/11/1999 </td> <td> RUPP </td> <td> Year1 </td> </tr> <tr> <td> testing1 </td> <td> 10 </td> <td> 10/11/1999 </td> <td> 10/11/1999 </td> <td> RUPP </td> <td> Year1 </td> </tr> <tr> <td> testing1 </td> <td> 10 </td> <td> 10/11/1999 </td> <td> 10/11/1999 </td> <td> RUPP </td> <td> Year1 </td> </tr> <tr> <td> testing1 </td> <td> 10 </td> <td> 10/11/1999 </td> <td> 10/11/1999 </td> <td> RUPP </td> <td> Year1 </td> </tr> </tbody> </table> </div> </div> </div> <!-- footer of report --> <div class="row"> <div class="address"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, animi! </div> <div class="tel"> 012121212212 </div> </div> </div> </body> </html> '; $mpdf->WriteHTML($html); $mpdf->Output(); ?>
Step 2: index.css
After adding CSS style.
*{
margin : 0;
padding : 0;
}
.container{
width:100%;
height:100%;
}
.container .row{
width: 100%;
}
.container .row .header .logo_description_report_header{
width: 100%;
/* display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
align-items: center; */
line-height: 1rem;
text-align: center;
}
.header .logo_description_report_header img{
width: 100px;
height:100px;
}
.header .logo_description_report_header .brand_company{
text-transform: capitalize;
background-color: rgba(255, 25, 0, 0.5);
padding: 0.5rem 0.8rem;
border-radius: 10px;
margin: auto;
width: 50%;
}
.header .logo_description_report_header .description{
color:gray;
font-size: 12px;
padding-bottom : 100px;
}
/* body of report style */
.body_report{
width: 100%;
margin-left:50px;
}
.body_report .Header_title{
padding-top:50px;
padding-bottom:50px;
width:inherit;
text-align: center;
}
.body_report .container_details{
width:inherit;
}
.body_report .container_details table{
border-spacing :0px;
}
.body_report .container_details table tr td{
width:15%;
padding: 5px 10px;
}
.body_report .container_details table thead tr{
background-color: red;
margin:0px;
}
.body_report .container_details table tbody tr:nth-child(odd){
background-color: rgb(135, 255, 79 ,0.3);
}
.body_report .container_details table tbody tr:nth-child(even){
background-color: rgba(252, 255, 79, 0.3);
}
/* here is footer */
.row .address{
padding-top:50px;
font-size: 10px;
}
.row .tel{
font-size: 10px;
}
1 Comments
bro.. How can i input my php string variable into it. Help
ReplyDeleteCAN FEEDBACK
Emoji