Question

以下是html和pdf的截图

我的html包含div和样式，如下所示

<!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>
	body{
		background: #f2f2f2;
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serifl;
		font-size:14px;
	}
	*{
		margin:0;
		padding:0;
		box-sizing:border-box;
	}
	.form-challan {
    width: 96%;
    margin: 0px auto;
    background: #ccc;
	padding:20px 0;
	min-height: 500px;
}
ul{
	list-style: none;
}

a{
	text-decoration:none;
}

.form-challan ul.main{
	display:flex;
	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;
	border: 2px solid;
	padding:5px 0;
}

.form-challan ul li:after{
	border-right: 1px dotted #000;
}

.rows {
    width: 100%;
    float: left;
}

.rows-tri{
	width:96%;
}
.f-right{
	float:right;
}
.f-left{
	float:left;
}
.t-right{
	text-align: right;
}
.t-left{
	text-align:left;
}
.t-center{
	text-align:center;
}
.gov-telangana{
	font-weight:bold;
	font-size:16px;
	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{
	display:block;
}
.rows-tri.f-right ul li{
	width:auto;
	border:none;
	min-height:inherit;
	padding:0;
}
.e-cls{
    float: left;
    margin: 0 0 0 5px;
}

.cha-tre-num {
    width: 98%;
    float: right;
	padding: 5px 0;
}

.cha-tre-num .challan-no {
    width: 56%;
    margin-left: 10px;
}

.hr-full{
	width:100%;
	border-bottom:2px solid #333;
	float:left;
}

.major-head {
    padding: 3px 0;
}
.pa3{
	padding:3px 0;
}
.wid-mar{
	width:98%;
	margin:0px auto;
    display: table;
}

.major-head.wid-mar ul li input {
    width: 25%;
}
</style>
</head>

<body>
<div class="form-challan">
	<ul class="main">
    	<li id="triplicate">
        	<div class="rows">
                <div class="rows-tri f-left t-right">
                <span class="e-cls">E</span>
                    <span class="tri-title">TRIPLICATE</span>
                </div>
			</div>
            <div class="rows t-center">
                <p class="gov-telangana">GOVERNMENT OF TELANGANA</p>
            </div>
            <div class="rows">
            	<div class="rows-tri f-right">
					<ul class="f-left">
						<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" />
						</li>
                    </ul>
                </div>
            </div>
            
            <div class="rows">
            	<div class="cha-tre-num">
                	<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">
            	<div class="major-head wid-mar">
                	<ul class="f-left">
						<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" />
						</li>
                        <li style="width:35%; float:right;"><span>Other Deposits</span></li>
                        
                    </ul>
                </div>
            </div>
            
            <div class="hr-full"></div>
            
            <div class="rows">
            	<div class="sub-major-head wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</li>
                    </ul>
                </div>
            </div>
            
            <div class="hr-full"></div>
            
            <div class="rows">
            	<div class="minor-head wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</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">
            	<div class="group-sub-head wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</li>
                    </ul>
                </div>
            </div>
            
            <div class="hr-full"></div>
            
            <div class="rows">
            	<div class="sub1-head wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</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">
            	<div class="detailed1-head wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</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">
            	<div class="sub-detailed wid-mar pa3">
                	<ul class="f-left">
						<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%;" />
						</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">
            	<div class="sub-detailed wid-mar pa3">
                	<ul class="f-left" style="font-size:12px;">
						<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
						</li>
                        <li style="width:22%; float:left;">
                            <input type="text" placeholder="V" style="width:25%;" />
                            Charged = C Voted =V
						</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%;" />
						</li>
                    </ul>
                </div>
            </div>
            
            <div class="hr-full"></div>
            
            <div class="rows">
            	<div class="amount-box">
                	<div class="wid-mar pa3">
                    	
                    </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代码

<?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));
}
?>

html中将有三个框。这里有什么错误？ dompdf不支持所有样式吗？有一个css代码说display：flex，如果有的话pdf正在生成空。如果我删除该行附加的pdf生成。请帮忙

Answer 1

我刚刚完成了一个使用dompdf创建PDF的页面，除此之外我意识到dompdf肯定不支持flexbox，还有其他一些限制。在许多情况下浮动元素也是一个问题，所以我最终使用了所有inline-block元素而不是浮点数，还有一些表格（根本没有Flexbox）。事实上，我或多或少不得不重建整个页面，我担心这也是你必须做的......

Dompdf无法正确生成pdf

1 个答案: