How to create HTML to mPDF

Code for create mPDf from HTML, HTML to mPDF, How to create mPDF from HTML, inline css in HTML tag for create mPDF, show mPDF from HTML. Laravel HTML to mPDF, HTML to mPDF in Laravel.

We show how you create mPDF from HTML. Here we will work routes.php, PagesController.php and in app>>views folder. Now take a php file in your app >> views folder, example: item9.blade.php. This file we will write my HTML code for View mPDF. Now open your routes.php and paste below code:



Route::get('/pdf9', ['as' => 'pdf', 'uses' => 'PagesController@pdf9']);

Now open your PagesController.php and copy and paste below code:


	public function pdf9() {	
        $mpdf = new mPDF();		    
		$mpdf->WriteHTML(View::make('item9'));
		//return View::make('item9'); if active then it will show HTML formate
		$mpdf->Output();
	}

Now open your item9.blade.php and copy and paste below code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample pdf</title>
</head>

<body>
<style>
html, body, div,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,{margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align:top;}:focus {outline: 0;}

table {border-collapse: collapse; border-spacing: 0;} input, select {vertical-align:middle;} abbr

, dfn

{border-bottom:1px dotted; cursor:help;} body {font-family: 'FreeSerif',sans-serif;} td.title{ font-size:30px; line-height:36px; color:#000;} td.subtitle{ font-size:24px; line-height:30px; color:#000;} td.mintitle{ font-size:20px; line-height:24px; color:#000;} td.small-title{ font-size:16px;text-align:center; font-weight:bold;} .order-details tr, .order-details td{ border:1px solid #cecece; padding:10px 10px;} div.seip-table{ position: relative; } div.photo-attachted{ border-collapse: collapse; padding: 5px; text-align: center;border:1px dotted black;width:100%;height: 80px;} </style> <div class="seip-table"> <div class="top-left" style="width:8%; float:left">&nbsp;</div> <div class="top-left" style="width:80%; float:left"> <table width="100%" style="text-align:center; width:100%; margin-top:20px;"> <tr> <td width="100%" class="small-title"> Technical Training Center<br> Sopura, Rajshahi.<br> Telephone Number: 0721-761598<br> Email: ttcraj@gmail.com<br> Web Address: ttcraj.gov.bd </td> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td> <div style="border-collapse:collapse;border-bottom:2px solid #000;font-size:24px; margin-bottom:10px;color:#000;">SEIP Trainee Admissio Form ( প্রশিক্ষণার্থীদের ভর্তি ফরম)</div> <div style="border-collapse: collapse;border-bottom:1px solid #000;color:#000; font-size:16px; padding-top:10px; ">সকল তথ্য অবশ্যই ইংরেজি ব্লক লেটারে পূরণ করিতে হইবে</div> </td> </tr> </tr> </table> </div> <div class="top-left" style="width:12%; float:left"> <div class="photo-attachted"> Photo <br> (2 copies) </div> </div> <div width="100%" style="text-align:left; width:100%; margin-top:20px; padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Course Applied</strong> ( প্রশিক্ষণ কর্মসূচীর নাম)</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div style=" font-size:18px;border-collapse:collapse;border-bottom:2px solid #000;color:#000; padding-top:20px;"> <strong>1. Basic Information</strong> ( সাধারণ তথ্যাবলী) </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Name</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles">নাম ( বাংলা )</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Gender</strong></div> <div class="subtitles" style=" width:65%; float:left;">:&nbsp;&nbsp; <input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Male &nbsp; &nbsp; &nbsp; &nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Female</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:37%; float:left;" class="subtitles"><strong>National ID Number</strong> (জাতীয় পরিচয় পত্র নং)</div> <div class="subtitles" style=" width:63%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> <em style="font-size:11px;">(Copy of NID to be attached)(ফটোকপি দিতে হবে)</em> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:48%; float:left;" class="subtitles"> <strong>Birth Registration Certificate Number</strong> (জন্মনিবন্ধন নং) </div> <div class="subtitles" style=" width:52%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> <em style="font-size:11px;">(if NID is not available then birth registration certificate to be attached)(জাতীয় পরিচয় পত্র না থাকলে)</em> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:40%; float:left;" class="subtitles"><strong>Date of Birth</strong><em>(YYYY/MM/DD)</em>(বছর/মাস/দিন)</div> <div class="subtitles" style=" width:15%; float:left;border-collapse: collapse;border-bottom:1px dotted #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:5%; float:left;"> Year</div> <div class="subtitles" style=" width:15%; float:left;border-collapse: collapse;border-bottom:1px dotted #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:6%; float:left;"> Month</div> <div class="subtitles" style=" width:14%; float:left;border-collapse: collapse;border-bottom:1px dotted #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:5%; float:left;"> Day</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:20%; float:left;" class="subtitles">বর্তমান ঠিকানা (বাংলা) :</div> <div class="subtitles" style=" width:25%; float:left;">গ্রাম/মহল্লা-</div> <div class="subtitles" style=" width:17%; float:left;"> বাসা নং- </div> <div class="subtitles" style=" width:20%; float:left;">পোঃ</div> <div class="subtitles" style=" width:18%; float:left;"> রাস্তা নং- </div> <div class="hr clear" style="height:5px; margin:1px 0px; margin-top:1px; clear:both;">&nbsp;</div> <div class="subtitles" style=" width:34%; float:left;"> থানা </div> <div class="subtitles" style=" width:33%; float:left;"> উপজেলা </div> <div class="subtitles" style=" width:33%; float:left;"> জেলা </div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:20%; float:left;" class="subtitles"><strong>Present Address:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>Vill/Moholla:</strong></div> <div class="subtitles" style=" width:17%; float:left;"><strong>Holding No:</strong> </div> <div class="subtitles" style=" width:23%; float:left;"><strong>P.O.:</strong></div> <div class="subtitles" style=" width:15%; float:left;"><strong>Code:</strong></div> <div class="hr clear" style="height:5px; margin:1px 0px; margin-top:1px; clear:both;">&nbsp;</div> <div class="subtitles" style=" width:25%; float:left;"><strong>Road No:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>P.S.:</strong> </div> <div class="subtitles" style=" width:25%; float:left;"><strong>Upazilla:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>Dist:</strong></div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:20%; float:left;" class="subtitles"> স্থায়ী ঠিকানা (বাংলা) :</div> <div class="subtitles" style=" width:25%; float:left;">গ্রাম/মহল্লা-</div> <div class="subtitles" style=" width:17%; float:left;"> বাসা নং- </div> <div class="subtitles" style=" width:20%; float:left;">পোঃ</div> <div class="subtitles" style=" width:18%; float:left;"> রাস্তা নং- </div> <div class="hr clear" style="height:5px; margin:1px 0px; margin-top:1px; clear:both;">&nbsp;</div> <div class="subtitles" style=" width:34%; float:left;"> থানা </div> <div class="subtitles" style=" width:33%; float:left;"> উপজেলা </div> <div class="subtitles" style=" width:33%; float:left;"> জেলা </div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:20%; float:left;" class="subtitles"><strong>Permanent Address:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>Vill/Moholla:</strong></div> <div class="subtitles" style=" width:17%; float:left;"><strong>Holding No:</strong> </div> <div class="subtitles" style=" width:23%; float:left;"><strong>P.O.:</strong></div> <div class="subtitles" style=" width:15%; float:left;"><strong>Code:</strong></div> <div class="hr clear" style="height:5px; margin:1px 0px; margin-top:1px; clear:both;">&nbsp;</div> <div class="subtitles" style=" width:25%; float:left;"><strong>Road No:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>P.S.:</strong> </div> <div class="subtitles" style=" width:25%; float:left;"><strong>Upazilla:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>Dist:</strong></div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:50%; float:left;" class="subtitles"><strong>Home District & Upazilla </strong>( নিজ জেলা এবং উপজেলা ) :</div> <div class="subtitles" style=" width:25%; float:left;"><strong>Upazilla:</strong></div> <div class="subtitles" style=" width:25%; float:left;"><strong>District:</strong> </div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Mobile No</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Email</strong><em>(if available)</em></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div style=" font-size:18px;border-collapse:collapse;border-bottom:2px solid #000;color:#000; padding-top:20px;"> <strong>2. Personal Information</strong> ( ব্যক্তিগত তথ্যাবলী) </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:15%; float:left;" class="subtitles"><strong>Religion</strong> (ধর্ম) <strong>:</strong></div> <div class="subtitles" style=" width:26%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:5%; float:left">&nbsp;</div> <div style=" width:24%; float:left;" class="subtitles"><strong>Ethnic Group</strong> ( উপজাতি) <strong>:</strong></div> <div class="subtitles" style=" width:30%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;"> &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%; margin-top:20px; padding-top:30px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Education Level</strong> ( শিক্ষাগত যোগ্যতা)</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:45%; float:left;" class="subtitles"><strong>Highest Class Completed</strong> ( সরবচ্চ শিক্ষাগত যোগ্যতা) <strong>:</strong></div> <div class="subtitles" style=" width:13%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:11%; float:left"><strong>Year</strong> (বছর) <strong>:</strong></div> <div class="subtitles" style=" width:7%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;"> &nbsp;</div> <div class="subtitles" style=" width:15%; float:left"><strong>GPA/Division:</strong></div> <div class="subtitles" style=" width:8%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;"> &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Are You Currently Employed?</strong> ( বর্তমানে আপনি কি চাকুরি করছেন?)</div> <div class="subtitles" style=" width:40%; float:left;">:&nbsp;&nbsp; <input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Yes &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> No</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Family's Monthly Income <em>(BDT)</em></strong> ( পরিবারের মাসিক আয় টাকা)</div> <div class="subtitles" style=" width:40%; float:left;border-collapse: collapse;border-bottom:1px dotted #000; display:inline;"><strong>:</strong></div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Are You Physically Challenged?</strong> ( প্রতিবন্ধী)</div> <div class="subtitles" style=" width:40%; float:left;">&nbsp;&nbsp; <input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Yes &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> No</div> <div class="subtitles" style=" width:100%; float:left;"> <em>(if Yes)</em> &nbsp; &nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Seeing &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Movement &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Hearing &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Speech &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Others</div> </div> <div style=" font-size:18px;border-collapse:collapse;border-bottom:2px solid #000;color:#000; padding-top:20px;"> <strong>3. Family Information</strong> ( পরিবারের তথ্যাবলী বাংলা ও ইংরেজিতে দিতে হবে) </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Mother's Name</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles">মাতার নাম</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style="width:35%; float:left;" class="subtitles"><strong>Mother's Education Level</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles">মাতার শিক্ষাগত যোগ্যতা</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Father's Name</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"> পিতার নাম</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Father's Education</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles">পিতার শিক্ষাগত যোগ্যতা</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Father's Annual Income</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles">পিতার বাৎসরিক আয়</div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:35%; float:left;" class="subtitles"><strong>Mobile Number of Father/Brother/Sister/Friend</strong></div> <div class="subtitles" style=" width:65%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Does Your Family Own Home?</strong> ( নিজস্ব জমি আসে কি না?)</div> <div class="subtitles" style=" width:40%; float:left;">:&nbsp;&nbsp; <input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Yes &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> No</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Does Your Family Own Land?</strong> ( নিজস্ব বাড়ি আছে কি না? )</div> <div class="subtitles" style=" width:40%; float:left;">:&nbsp;&nbsp; <input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> Yes &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<input id="yes-checkbox2" type="checkbox" name="yes" value="yes-box"> No</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:10px;"> <div style=" width:60%; float:left;" class="subtitles"><strong>Number of Brothers and Sisters</strong> ( ভাই বোন কতো জন)</div> <div class="subtitles" style=" width:40%; float:left;border-collapse: collapse;border-bottom:1px solid #000; display:inline;">: &nbsp;</div> </div> <div style=" font-size:18px;border-collapse:collapse;border-bottom:2px solid #000;color:#000; padding-top:20px;"> <strong>4. Declaration</strong> ( অঙ্গীকার নামা) </div> <div style="width:100%;padding-left:20px;"> 1) I certify that correctly provide my information and qualifications in the student admission form.<br> 2) I express my willingness to render my services to the related industrial sector after completion of the Training Program. </div> <div width="100%" style="text-align:left; width:100%;padding-top:80px;"> <div style=" width:35%; float:left;border-collapse: collapse;border-top:1px solid #000; display:inline-block; text-align:center;" class="subtitles"> Signature Of Trainee (শিক্ষার্থীর স্বাক্ষর)</div> <div class="subtitles" style=" width:40%; float:left;"> &nbsp;</div> <div class="subtitles" style=" width:25%; float:left;border-collapse: collapse;border-top:1px solid #000; display:inline-block; text-align:center;">Date (তারিখ)</div> </div> <div width="100%" style="text-align:left; width:100%;padding-top:60px;"> <div style=" display:inline; width:33%; float:left;">Trade Incharge</div> <div style=" display:inline; width:50%; float:left;"> &nbsp;</div> <div style=" display:inline; width:15%; float:left;">Principal</div> </div> </div> </body> </html>

​Leave a Comment

Comment authors age:




Rajshahi Gov. School Admission Result 2018

GP Internet Offer 1GB Data Only 9 Taka