2016-11-03 5 views
0

Unten ist mein Screenshots von html und pdf html screenshotdompdf nicht zu erzeugen pdf richtig

pdf screenshot

mein html enthält divs und Stile wie unten

<!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>Challan Form</title> 
 
<style> 
 
\t body{ 
 
\t \t background: #f2f2f2; 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl; 
 
\t \t font-size:14px; 
 
\t } 
 
\t *{ 
 
\t \t margin:0; 
 
\t \t padding:0; 
 
\t \t box-sizing:border-box; 
 
\t } 
 
\t .form-challan { 
 
    width: 96%; 
 
    margin: 0px auto; 
 
    background: #ccc; 
 
\t padding:20px 0; 
 
\t min-height: 500px; 
 
} 
 
ul{ 
 
\t list-style: none; 
 
} 
 

 
a{ 
 
\t text-decoration:none; 
 
} 
 

 
.form-challan ul.main{ 
 
\t display:flex; 
 
\t justify-content: space-between; 
 
} 
 

 
.form-challan ul.main li#triplicate, 
 
.form-challan ul.main li#duplicate, 
 
.form-challan ul.main li#original { 
 
    width: 32.33%; 
 
    background: #fff; 
 
    min-height: 400px; 
 
\t border: 2px solid; 
 
\t padding:5px 0; 
 
} 
 

 
.form-challan ul li:after{ 
 
\t border-right: 1px dotted #000; 
 
} 
 

 
.rows { 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.rows-tri{ 
 
\t width:96%; 
 
} 
 
.f-right{ 
 
\t float:right; 
 
} 
 
.f-left{ 
 
\t float:left; 
 
} 
 
.t-right{ 
 
\t text-align: right; 
 
} 
 
.t-left{ 
 
\t text-align:left; 
 
} 
 
.t-center{ 
 
\t text-align:center; 
 
} 
 
.gov-telangana{ 
 
\t font-weight:bold; 
 
\t font-size:16px; 
 
\t margin:0 0 5px 0; 
 
} 
 

 
input[type="text"] { 
 
    padding: 2px; 
 
    float: left; 
 
    width: 10%; 
 
    text-align: center; 
 
    border: 1px solid #000; 
 
} 
 

 
.rows-tri.f-right ul{ 
 
\t display:block; 
 
} 
 
.rows-tri.f-right ul li{ 
 
\t width:auto; 
 
\t border:none; 
 
\t min-height:inherit; 
 
\t padding:0; 
 
} 
 
.e-cls{ 
 
    float: left; 
 
    margin: 0 0 0 5px; 
 
} 
 

 
.cha-tre-num { 
 
    width: 98%; 
 
    float: right; 
 
\t padding: 5px 0; 
 
} 
 

 
.cha-tre-num .challan-no { 
 
    width: 56%; 
 
    margin-left: 10px; 
 
} 
 

 
.hr-full{ 
 
\t width:100%; 
 
\t border-bottom:2px solid #333; 
 
\t float:left; 
 
} 
 

 
.major-head { 
 
    padding: 3px 0; 
 
} 
 
.pa3{ 
 
\t padding:3px 0; 
 
} 
 
.wid-mar{ 
 
\t width:98%; 
 
\t margin:0px auto; 
 
    display: table; 
 
} 
 

 
.major-head.wid-mar ul li input { 
 
    width: 25%; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div class="form-challan"> 
 
\t <ul class="main"> 
 
    \t <li id="triplicate"> 
 
     \t <div class="rows"> 
 
       <div class="rows-tri f-left t-right"> 
 
       <span class="e-cls">E</span> 
 
        <span class="tri-title">TRIPLICATE</span> 
 
       </div> 
 
\t \t \t </div> 
 
      <div class="rows t-center"> 
 
       <p class="gov-telangana">GOVERNMENT OF TELANGANA</p> 
 
      </div> 
 
      <div class="rows"> 
 
      \t <div class="rows-tri f-right"> 
 
\t \t \t \t \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:20%; float:left;"><span>DTO/STO</span></li>     
 
         <li style="width:25%; float:left;"><span>HYD</span></li> 
 
         <li style="width:54%; float:left;"> 
 
          <span class="f-left">Treaury/PAO Code</span> 
 
          <input type="text" placeholder="2" /> 
 
          <input type="text" placeholder="5" /> 
 
          <input type="text" placeholder="0" /> 
 
          <input type="text" placeholder="2" /> 
 
\t \t \t \t \t \t </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="cha-tre-num"> 
 
       \t <span class="f-left">Treasury Challan No.</span> 
 
        <input type="text" class="challan-no f-left"/> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      <div class="rows"> 
 
      \t <div class="major-head wid-mar"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Major Head</span></li>     
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="2" /> 
 
          <input type="text" placeholder="5" /> 
 
          <input type="text" placeholder="0" /> 
 
          <input type="text" placeholder="2" /> 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:35%; float:right;"><span>Other Deposits</span></li> 
 
         
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="sub-major-head wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Sub - Major Head</span></li>     
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="minor-head wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left; margin-top: 5px;"><span>Minor Head</span></li>     
 
         <li style="width:25%; float:left; margin-top: 5px;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:40%; float:left; font-size:12px;"><span>Defined Contributory Pension Scheme For Govt. Employess</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="group-sub-head wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Group Sub - Head</span></li>     
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="sub1-head wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left; margin-top: 5px;"><span>Sub - Head</span></li>     
 
         <li style="width:25%; float:left; margin-top: 5px;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:40%; float:left; font-size:12px;"><span>AP State Govt EMployees Contributory Pension Scheme</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="detailed1-head wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Detailed - Head</span></li>     
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
          <input type="text" placeholder="5" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:40%; float:left; font-size:12px;"><span>Employee Contribution</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="sub-detailed wid-mar pa3"> 
 
       \t <ul class="f-left"> 
 
\t \t \t \t \t \t <li style="width:30%; float:left;"><span>Sub - Detailed</span></li>     
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="0" style="width:25%;" /> 
 
          <input type="text" placeholder="0" style="width:25%;" /> 
 
          <input type="text" placeholder="0" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:40%; float:left; font-size: 14px; text-align: center;"><span>---</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="sub-detailed wid-mar pa3"> 
 
       \t <ul class="f-left" style="font-size:12px;"> 
 
\t \t \t \t \t \t <li style="width:20%; float:left;"><span>Non-Plan =N Plan=P</span></li>     
 
         <li style="width:22%; float:left; margin-right: 10px;"> 
 
          <input type="text" placeholder="N" style="width:25%;" /> 
 
          Charged = C Voted =V 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:22%; float:left;"> 
 
          <input type="text" placeholder="V" style="width:25%;" /> 
 
          Charged = C Voted =V 
 
\t \t \t \t \t \t </li> 
 
         <li style="width:25%; float:left;"> 
 
          <input type="text" placeholder="2" style="width:25%;" /> 
 
          <input type="text" placeholder="0" style="width:25%;" /> 
 
          <input type="text" placeholder="7" style="width:25%;" /> 
 
          <input type="text" placeholder="1" style="width:25%;" /> 
 
\t \t \t \t \t \t </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="hr-full"></div> 
 
      
 
      <div class="rows"> 
 
      \t <div class="amount-box"> 
 
       \t <div class="wid-mar pa3"> 
 
        \t 
 
        </div> 
 
       </div> 
 
      </div>    
 
      
 
      
 
     </li> 
 
     <li id="duplicate"></li> 
 
     <li id="original"></li> 
 
    </ul> 
 
</div> 
 

 
<a class="hideforpdf" href="converted2.php?action=download" target="_blank">View PDF</a> 
 
</body> 
 
</html>

PHP-Code

<?php 
require_once 'dompdf/autoload.inc.php'; 

// reference the Dompdf namespace 
use Dompdf\Dompdf; 

if (isset($_GET['action']) && $_GET['action'] == 'download') { 

// instantiate and use the dompdf class 
$dompdf = new Dompdf(); 

//to put other html file 
$html = file_get_contents('challan-form.html'); 

//hide download pdf link in generated output pdf 
$html .= '<style type="text/css">.hideforpdf { display: none; }</style>'; 

//load html 
$dompdf->loadHtml($html); 

// (Optional) Setup the paper size and orientation 
$dompdf->setPaper('Legal', 'Landscape'); 

// Render the HTML as PDF 
$dompdf->render(); 

// Output the generated PDF (1 = download and 0 = preview) 
    $dompdf->stream("sample",array("Attachment"=>1)); 
} 
?> 

Es wird drei Felder in HTML geben. Was ist der Fehler hier? Unterstützt dompdf nicht alle Stile? Es gibt einen CSS-Code, der sagt: flex, pdf erzeugt leer, wenn es da ist. Wenn ich diese Zeile entferne, wird das angehängte PDF erzeugt. Bitte helfen Sie mir

Antwort

0

Ich habe gerade eine Seite erstellt PDFs mit Dompdf, und unter anderem erkannte ich, dass dompdf definitiv nicht unterstützt flexbox und hat auch einige andere Einschränkungen. Auch floated Elemente waren in vielen Fällen ein Problem, so dass ich am Ende alle inline-block Elemente anstelle von Floats verwendete, und auch ein paar Tabellen (und überhaupt keine Flexbox). Tatsächlich musste ich mehr oder weniger die ganze Seite neu aufbauen, und ich fürchte, das musst du auch tun ...

Verwandte Themen