本文介绍了Dompdf无法正确生成pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的html和pdf屏幕截图
Below is my screenshots of html and pdf
我的html包含如下所示的div和样式
my html contains divs and styles like below
<!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。请帮忙
There will be three boxes in html.What is the mistake here? Does dompdf doesnot support all styles? there is a css code saying display:flex, pdf is generating empty if it is there. If I remove that line attached pdf is generated. Please help
推荐答案
我刚刚完成了一个使用dompdf创建PDF的页面，除其他外，我意识到dompdf绝对不支持flexbox并且还有很多其他限制。在许多情况下，浮动元素也是一个问题，因此我最终使用了所有 inline-block 元素而不是浮动元素，还使用了一些表（根本没有flexbox）。实际上，我或多或少不得不重新构建整个页面，而且恐怕这也是您必须要做的...
I just finished a page creating PDFs using dompdf, and among other things I realized that dompdf definitely doesn't support flexbox and has quite a few other limitations too. Also floated elements were a problem in many cases, so I ended up using all inline-block elements instead of floats, and also a few tables (and no flexbox at all). In fact I more or less had to rebuild the whole page, and I am afraid this is what you'll have to do, too...
这篇关于Dompdf无法正确生成pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！