I'm converting HTML to PDF and its working fine but the issue is when I generate PDF first page of PDF is blank. All records are set from second page of that PDF.
I'm Using Codeigniter framework.And using below package
#package Html2pdf
* #author Laurent MINGUET <webmaster#html2pdf.fr>
* #copyright 2017 Laurent MINGUET
Below is the code which doing all that.
try {
$html2pdf = new Html2Pdf('P', 'A4', 'fr');
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML($content);
$html2pdf->output($pdfname.'.pdf','D');
} catch (Html2PdfException $e) {
$html2pdf->clean();
$formatter = new ExceptionFormatter($e);
echo $formatter->getHtmlMessage();
}
Below is html content
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Invoice</title>
<style type="text/css">
body {background-color: rgb(204,204,204); margin: 0; padding: 0;}
.header {margin-bottom: 40px;}
/*.header div {width: 700px;}*/
.text-right {text-align: right;}
.table-value td { border-bottom: 1px solid #e7ecf1;
border-right: 1px solid #e7ecf1;
border-left: 1px solid #e7ecf1;}
.table-value th{ border-top: 1px solid #e7ecf1;
border-bottom: 2px solid #c8c8c8;
border-right: 1px solid #e7ecf1;
border-left: 1px solid #e7ecf1;}
</style>
</head>
<body>
<!-- <page size="A4"> -->
<div class="header">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; font-size: 11pt;">
<tr>
<td colspan="1" style="width: 360px;">
<img src="http://test.com/assets/image-2019-05-13-16-32-28-565.png" style="width: 60%;">
</td>
<td colspan="1" valign="middle" style=" text-align: right; width: 350px;">
<p style="margin: 0;">Test</p>
<p style="margin: 0;">Test</p>
<p style="margin: 0;">Test</p>
</td>
</tr>
</table>
</div>
<div class="content">
<div class="content-box" style="padding-bottom: 30px; border-bottom: 1px solid #000; margin-bottom: 50px;">
<p style="color: #d71383;font-size: 36px;margin-bottom: 10px;">Test</p>
<p></p>
<div style="line-height: 20px;">
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-name">Test: <span>##COMPANYNAME##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-contact">Test: <span>##USERNAME##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-email">E-mail: <span>##EMAIL##</span></div>
<p></p>
<div style="margin-top: 0px;margin-bottom: 0px;" id="uren-periode">Test: <span>##FROMDATETODATE## </span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="datum">Test: <span>##TODAYDATE##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="total-aantal-uren">Total: <span>##HOURMIN##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="hourly-rate">Test: <span>##HOURLYRATE##</span></div>
</div>
</div>
<div class="table-value-box">
<div class="table-responsive">
<table class="table-value" width="100%" cellspacing="0" cellpadding="0" role="presentation" style="max-width: 800px;margin: 0 auto; font-size: 11pt;">
<thead>
<tr>
<th style="width: 60px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Ticket #</span></th>
<th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Datum</span></th>
<th style="width: 288px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Onderwerp</span></th>
<th style="width: 158px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Tijd</span></th>
<th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Status</span></th>
</tr>
</thead>
<tbody>
##DATA##
</tbody>
</table>
</div>
</div>
</div>
<!-- </page> -->
</body>
</html>
Any Help will be appreciated.
Without calling the constructor twice, Try the following :
try {
$html2pdf = new Html2Pdf('P', 'A4', 'fr', true, 'UTF-8', [2, 2, 2, 5]);
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML($content);
$html2pdf->output($pdfname.'.pdf','D');
} catch (Html2PdfException $e) {
$html2pdf->clean();
$formatter = new ExceptionFormatter($e);
echo $formatter->getHtmlMessage();
}
Also the number of pages and placement of page breaks depends highly on the structure of your html content. An empty <page> tag or a misplaced <div> could also create troubles while using html2pdf.
Incase the above solution doesn't workout , please post sample html document content, esp.the first few lines from the source of the browser, will try to help
Related
I'm using mpdf in Laravel and with this package version 4.0
The problem is that I have a list of questions in different heights which have 4 options, and I don't know the exact and approximate height of every div tag which question and answer options are there, I don't want some part of my question to go to another page
All parts of my question have to be on one page and if this couldn't happen, mpdf put that question tag element on the next page (all parts of questions)
this picture is for now which is wrong:
what I want:
This image
so for this problem, I want to know the height of my question element so I can determine if the new page is needed to add a page break(same as this question on StackOverflow), or any other solution to fix my issue
this is my blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
.sub-item-answer{
float: left;
display: inline !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer-num{
width: 5%;
float:right;
}
.q_1{
margin-top: 45px !important;
}
.question{
display: inline-block;
page-break-inside: avoid !important;
position: relative;
float:right;
}
.question-row{
display: inline !important;
width: 100%;
}
.question-number{
padding: 5px;
background: #bebe27;
border-radius: 10px;
width:10% !important;
text-align: center;
color:#ffffff;
font-weight: bold;
}
.main-question{
width: 95% !important;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<div style="page-break-inside: avoid !important;" class="question q_{{$i}}">
<div class="row question-row">
<div class="question-number col-sm-1"> سوال{{$i}} </div>
<div class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</div>
</div>
#if($question->options)
<div class="question-main-container" style="float: right">
#foreach($question->options as $option)
#php
$j++;
#endphp
<div class="item-answer center-block row">
<div class="sub-item-answer-num col-sm-1">{{$j}})</div>
#if($option->title)
<div class="sub-item-answer col-sm-11">
{!! $option->title !!}
#if($option->image_url)
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
#endif
</div>
#else
#if($option->image_url)
<div class="sub-item-answer col-sm-11">
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
</div>
#endif
#endif
</div>
#endforeach
</div>
#endif
<hr>
</div>
#endforeach
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: center;direction: rtl;">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">
</htmlpagefooter>
</body>
</html>
and I tried all methods in the documentation of mpdf and this answer but results were not useful
if any other solution exists please guide me
After lots of tries, the issue solved!
the page-break-inside: avoid; doesn't work when I have a loop of block elements
I used a table for every question and put it in the main table and in it's <td> tag, the inner table now has autosize="1" which was needed
also, add this config to mPdf
$pdf->shrink_tables_to_fit = 1;
I added page-break-inside: avoid to the main table and the <tr> of questions in the loop
note that if you faced undefined index error try to solve it generally! but if like me, it doesn't fixed use error_reporting(0);
the corrected blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:40mm 20mm 40mm 20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
p{
font-size:35px;
}
.sub-item-answer{
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer > img{
width: 100% !important;
min-height: 200px;
max-height: 500px;
}
.sub-item-answer-num{
width: 5%;
font-size: 35px;
}
.q_1{
margin-top: 45px !important;
}
.question-number{
padding: 20px !important;
background: #bebe27;
border-radius: 10px !important;
width:auto !important;
text-align: center;
color:#ffffff;
font-weight: bold;
height: auto;
font-size: 35px;
}
.main-question{
width: 95% !important;
font-size:30px;
}
.main-question > p{
font-size:30px !important;
}
.main-question > img{
width: 100% !important;
min-width: 800px !important;
max-width: 1000px !important;
min-height: 200px;
max-height: 500px;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
<table style="page-break-inside: avoid !important;">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<tr style="page-break-inside: avoid !important; min-height: 300px;">
<td>
<table autosize="1">
<tbody>
<tr>
<td><span class="question-number"> سوال{{$i}} </span></td>
<td class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</td>
</tr>
#if($question->options)
#foreach($question->options as $option)
<tr>
#php
$j++;
#endphp
<td class="sub-item-answer-num col-sm-1">{{$j}})</td>
#if($option->title)
<td class="sub-item-answer col-sm-11" style="font-size:35px !important;">
{!! $option->title !!}
#if($option->image_url)
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
#endif
</td>
#else
#if($option->image_url)
<td class="sub-item-answer col-sm-11">
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
</td>
#endif
#endif
</tr>
#endforeach
#endif
</tbody>
</table>
</td>
</tr>
#endforeach
</table>
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: left;direction: rtl; font-size: 15px; margin-top: 50px; padding-left:100px">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="width: 100%;">
</htmlpagefooter>
</body>
</html>
Use page-break-inside: avoid; for your block (see https://mpdf.github.io/css-stylesheets/supported-css.html)
I am trying to generate a bill for my system in Laravel, for which I have created a blade with my bill format as below:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css" media="all">
body { font-family: "Roboto", serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
.table { color: #000; }
.table td, .table th { border-top: 1px solid #000;
border-bottom: 1px solid #000;}
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
.small-heading{
font-size: 0.8rem;
border: groove;
}
#sign {
position: relative;
min-height: 150px;
}
#sign-content {
position: absolute;
bottom: 0;
}
#thankyou{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col text-center text-left mb-3">
<p>Counter</p>
</div>
<div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
<h2 class="mb-1"> DIAMOND </h2>
</div>
<div class="col text-center text-md-right">
<p>Phone: 78787878789
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<div class="table-responsive-xl" style="min-height: 500px">
<table class="table" style="margin-bottom: 0; width:100%;">
<thead>
<tr>
<th>क्र.सं.<br>S.N </th>
<th>Description of Goods</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Tilhari</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col-md mt-0 text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
<div class="row">
<div class="col-md-6 text-md-center">
24 Carat 100 <br>
</div>
<div class="col-md-6 text-md-center">
24 Carat 100<br>
</div>
</div>
</div>
<div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
</div>
<div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
</div>
<div class="col" style="padding-left: 0">
<table class="table" style="margin: 0">
<tbody>
<tr>
<td colspan="12">
</td><td class="text-right">Total</td>
<td>$2,400.00</td>
</tr>
</tbody>
</table>
<div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
<span id="thankyou">Thank you!</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md">
<div class="row">
Email: <u></u>
</div>
</div>
<div class="col-md">
On Sale!
</div>
<div class="col-md text-center ml-5" >
<p style="text-align: left">981111111
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I have used dompdf to generate the bills but upon generating the bill, it is generated succesfully but the layout is all messed up. It is not as it seem in the browser.
In the browser:
pdf generated:
How can I fix the issue?
Through my research, I found out that Dompdf does not yet support Bootstrap grid system, due to which my contents were getting overlapped. I re-wrote all the css and the issue got fixed.
I am trying to display client details as a pdf using dompdf from HTML. Also added a header and footer in the pdf. Some contents in the pdf are displayed under the footer section.
This is the Image of pdf generated, here the data under Other Details are displayed under the footer section. How can change the alignment of content into the next page with a header and footer?
This is the code have written, give a solution
<html>
<head>
<title>Prescription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
.text-center {
text-align: center;
}
.phone {
float: right;
margin-bottom: 10px;
margin-right: 150px;
}
.phone h4 {
text-align: center;
right: 50px;
}
main {
margin-top: 200px;
padding: 10px 50px;
}
.after-header {
height: 30px;
padding: 10px 0;
}
.patient-id {
float: left;
}
.date-day {
float: right;
}
.page-header {
margin-top: 5px;
padding: 5px;
background-color: aqua;
}
.page-header h2 {
font-family: monospace;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-bottom: 1px solid #1f1f1f;
border-top: 1px solid #1f1f1f;
z-index: 1000;
}
footer h3 {
padding-left: 50px;
}
.details {
margin-top: 0;
padding: 2px 0;
}
table {
margin: 5px 0;
width: 100%;
border-top: 1px dotted #1f1f1f;
border-right: 1px dotted #1f1f1f;
}
td {
text-align: justify;
padding: 10px;
border-bottom: 1px dotted #1f1f1f;
border-left: 1px dotted #1f1f1f;
}
table tr>td:first-child {
border-left: none;
}
label {
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div class="text-center">
<h1>SPECIALITY CLINIC</h1>
<h2>xxxxxxxx</sub>
</h2>
<h3>Pediatrition</h3>
</div>
<div class="phone">
<h4>Phone: xxxxx</h4>
</div>
</header>
<footer>
<h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
</footer>
<main>
<div class="after-header">
<div class="patient-id">
<h3>Patient Id: 1001</h3>
</div>
<div class="date-day">
<h3>Date: 17/05/2019</h3>
</div>
</div>
<div class="page-header">
<h2>Patient Details</h2>
<hr>
</div>
<div class="details">
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>General Details</h3>
</div>
</div>
<table>
<col width="10%">
<col width="20%">
<col width="10%">
<col width="10%">
<col width="30%">
<tr>
<td><label>Name:</label></td>
<td colspan="3"><label>Agreesh V S</label></td>
<td rowspan="4"><img src="img.jpg"></td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><label>24</label></td>
<td><label>Gender: </label></td>
<td><label>Male</label></td>
</tr>
<tr>
<td><label>Phone: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Personal Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Other Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
</div>
</main>
</body>
</html>
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
#page {
margin: 220px 1in 1in 1in;
}
Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
I have a website that is optimized for both mobile and desktop devices. It turns out that on some mobile devices the following error appears:
ERR_EMPTY_RESPONSE
However if I ask the site for computer it already lets run the site. Is there any way to get the default web site to run on computer version. Or some other
solution? Thank you.
<html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=ibm866" > <meta name = "viewport" content= "width=device=width,
initial-scale=1">
<title>Meusite</title>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="2" style="width: 100%;
text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<div style="text-align: center;"><img src="img/vendas.jpg" style="width:
100%;" />
<!--<div style="text-align: center;"><img src="img/mini.JPG"
style="width: 100%;" />
<div style="text-align: center;"><img src="img/miniII.JPG"
style="width: 100%;" />-->
<div style="text-align: right; font-family: Arial;"></div>
</div>
<div style="text-align: center;"><br />
</div>
<div style="text-align: center;"><a
href="http://www.omeusite.pt/1038/omeusite.php"><img alt=""
src="img/Meusite.png" style="border: 0px solid ; width: 220px; " />
</a><br />
<div style="text-align: right;"><a href="tel:932222222"><img alt=""
src="img/tel.png" style="border: 0px solid ; width: 61px; height:
61px;" /></a></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<p></p>
</body>
This is the coding I am using to generate pdf invoice, I am using jquery to load div content of a php page inside $html, but it is not loading at all. I tried using hidden fields and javascript but none are working.
<?php
include("mpdf/mpdf.php");
$mpdf=new mPDF('win-1252','A4','','',20,15,48,25,10,10);
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array('print'));
$mpdf->SetTitle("Acme Trading Co. - Invoice");
$mpdf->SetAuthor("Acme Trading Co.");
$mpdf->SetWatermarkText("Paid");
$mpdf->showWatermarkText = true;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
$html = '
<html>
<head>
<style>
body {font-family: sans-serif;
font-size: 10pt;
}
p { margin: 0pt;
}
td { vertical-align: top; }
.items td {
border-left: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
table thead td { background-color: #EEEEEE;
text-align: center;
border: 0.1mm solid #000000;
}
.items td.blanktotal {
background-color: #FFFFFF;
border: 0mm none #000000;
border-top: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
.items td.totals {
text-align: right;
border: 0.1mm solid #000000;
}
</style>
</head>
<body>
<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="50%" style="color:#0000BB;"><span style="font-weight: bold; font-size: 14pt;">Acme Trading Co.</span><br />123 Anystreet<br />Your City<br />GD12 4LP<br /><span style="font-size: 15pt;">☎</span> 01777 123 567</td>
<td width="50%" style="text-align: right;">Invoice No.<br /><span style="font-weight: bold; font-size: 12pt;">0012345</span></td>
</tr></table>
</htmlpageheader>
<htmlpagefooter name="myfooter">
<div style="border-top: 1px solid #000000; font-size: 9pt; text-align: center; padding-top: 3mm; ">
Page {PAGENO} of {nb}
</div>
</htmlpagefooter>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="on" />
mpdf-->
<div style="text-align: right">Date: '.date('jS F Y').'</div>
<table width="100%" style="font-family: serif;" cellpadding="10">
<tr>
<td width="45%" style="border: 0.1mm solid #888888;"><span style="font-size: 7pt; color: #555555; font-family: sans;">SOLD TO:</span><br /><br />345 Anotherstreet<br />Little Village<br />Their City<br />CB22 6SO</td>
<td width="10%"> </td>
<td width="45%" style="border: 0.1mm solid #888888;"><span style="font-size: 7pt; color: #555555; font-family: sans;">SHIP TO:</span><br /><br />345 Anotherstreet<br />Little Village<br />Their City<br />CB22 6SO</td>
</tr>
</table>
**<div style="font-size:9px" id="serviced"><b>Service :</b></div>
<script type="text/javascript">
$(document).ready(function(){
$("#serviced").load("http://website.com/service.php #serviced")
})
</script>**
<div style="font-size:9px" id="tratyped"><b>Type of Transport :</b></div>
<div style="font-size:9px" id="custyped"><b>Type of Client</b></div>
<div style="font-size:9px" id="datepickerd"><b>Date :</b></div>
<div style="font-size:9px;display:none" id="timed"><b>Time :</b></div>
<div style="font-size:9px" id="departured"><b>Departure Address :</b></div>
<div style="font-size:9px" id="destinationd"><b>Arrival Address</b></div>
<div style="font-size:9px" id="passengerd"><b>No. of Passengers :</b></div>
<div style="font-size:9px" id="shairwelld"><b>No. of Chariwells :</b></div>
<div style="font-size:9px" id="babycd"><b>No. of Baby Chairs :</b></div>
<div style="font-size:9px" id="companiond"><b>No. of Companions :</b></div>
<div style="font-size:9px" id="luggaged"><b>No. of Luggages :</b></div>
<div style="font-size:9px" id="petd"><b>No. of Pets :</b></div>
<div style="font-size:9px" id="waitingd"><b>Waiting Time :</b></div>
<div style="font-size:9px" id="insuranced"><b>Insurance :</b></div>
<div style="font-size:9px" id="stopd"><b>Stop in Way :</b></div>
<div style="font-size:9px" id="dis"><b>Distance(app) :</b></div>
<div style="font-size:9px" id="tim"><b>Time(app) :</b></div>
<div style="font-size:9px" id="ht"><b>PRICE (HT) :</b></div>
<div style="font-size:9px" id="vat"><b>VAT :</b></div>
<div style="font-size:9px" id="ttc"><b>PRICE (TTC) :</b></div>
<div style="text-align: center; font-style: italic;">Payment terms: payment due in 28 days</div>
</body>
</html>
';
$mpdf->WriteHTML($html);
$mpdf->Output(); exit;
exit;
?>
I have bolded out the code where I am facing problem.
**<div style="font-size:9px" id="serviced"><b>Service :</b></div>
<script type="text/javascript">
$(document).ready(function(){
$("#serviced").load("http://website.com/service.php #serviced")
})
</script>**
I am trying to load the div content of a php page inside the $html in the above code, but it is not loading. I have tried everything I could but no luck so far.
Please help me with the code or suggestions.
Thanks!
Look at the documentation : http://mpdf1.com/manual/index.php
The JavaScript is not supported.
Parse your page for retrieve your #service (I can advising you this parser http://simplehtmldom.sourceforge.net/)
And then, just implement your text inside your HTML.
That can be like that :
Start by including the both library : mpdf & simplehtmldom.
include("mpdf/mpdf.php");
include("simple_html_dom.php");
Then for having the correct part of your page :
$html = file_get_html('http://yoururl.tld/');
$serviced = $html->find('div[id=serviced]', 0)->plaintext;
Then generate your PDF :
$mpdf = new mPDF('win-1252','A4','','',20,15,48,25,10,10);
... // Configure your PDF like you used to
$html = '<your html before the #serviced part>';
$html .= $serviced;
$html .= '</your html after the #serviced part>';
$mpdf->WriteHTML($html);
$mpdf->Output();
And tadaaaaa