问题是使用DomPDF将HTML转换为PDF

问题描述 投票：1回答：1

我正在尝试使用DomPDF将具有CSS的HTML内容以及自定义字体和图像转换为PDF。

我需要添加这些自定义字体，而且对齐也必须是完美的，因为内容是为响应式外观而设计的，所以我不能修改其中的大多数。

以下是HTML内容。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/material-dashboard.min.css?v=2.1.2" rel="stylesheet">
    <title>Document</title>
    <style>
        @font-face {
  font-family: Eutemia;
  src: url(assets/fonts/Eutemia.ttf);
}
@font-face {
  font-family: Pecita;
  src: url(assets/fonts/Pecita.ttf);
}
@font-face {
  font-family: Scribble;
  src: url(assets/fonts/Scribble.ttf);
}
@font-face {
  font-family: SFBurlingtonScript;
  src: url(assets/fonts/SFBurlingtonScript.ttf);
}
@font-face {
  font-family: DancingScript-Regular;
  src: url(assets/fonts/DancingScript-Regular.ttf);
}
@font-face {
  font-family: dotmatrix;
  src: url(assets/fonts/dotmatrix.ttf);
}
.signature1{
  font-family: Eutemia;
  color: black;
  font-size: 50px;
}
.signature2{
  font-family: Pecita;
  color: black;
  font-size: 50px;
}
.signature3{
  font-family: Scribble;
  color: black;
  font-size: 50px;
}
.signature4{
  font-family: SFBurlingtonScript;
  color: black;
  font-size: 50px;
}
.clinic-title{
  font-family: DancingScript-Regular;
  color: #0067b1;
  text-align: center;
  font-size:5.7vmax ;

}
.clinic-footer-text{  
  color: #ff0000;
  font-size: 10px;
}

hr.clinic-line {
  border: 1.5px solid#0067b1;  
}
.clinic-text{
  color: #0067b1;
}
.doc-name{
  font-size: 20px;
  font-weight: bold;
}
.dot-matrix{
  font-family: dotmatrix;
  color: #000;
  font-size: 25px;
}
    </style>
</head>
<body>
    <div class="pdf-generation">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body text-center">

        <div class="container" id="html2pdf">
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="text-right unique-roll">SNMC-060120-1001</h4>
                  </div>
                    <div class="col-md-2">
                      <img src="assets/img/SNMC.png" width="120" height="120">
                    </div>
                    <div class="col-md-10">
                      <div class="clinic-title"><br><br>
                        Senthivel Nadar Memorial Clinic
                      </div>
                    </div>
                    <div class="col-md-12">
                      <hr class="clinic-line">
                    </div>
                    <div class="col-md-12">
                      <div class="doc-name clinic-text text-center">test</div>
                    </div>
                    <div class="col-md-12">
                      <hr class="clinic-line">
                    </div>
                    <div class="col-md-5">
                      <div class="clinic-text patient-name">Name: wefwe</div>
                    </div>
                    <div class="col-md-3">
                      <div class="clinic-text today-date">Date: 01/06/2020</div>
                    </div>
                    <div class="col-md-2">
                      <div class="clinic-text patient-sex">Sex: male</div>
                    </div>
                    <div class="col-md-2">
                      <div class="clinic-text patient-age">Age: 23</div>
                    </div>
                    <div class="col-md-12">
                      <hr class="clinic-line">
                    </div>
                    <div class="col-md-12">
                      <div class="table-responsive">
                        <table class="table" id="prescribed-medicine">
                            <thead>
                              <tr>
                                <th class="text-center">#</th>
                                <th>Component</th>
                                <th>Brand</th>
                                <th>Type</th>
                                <th>Consumption</th>
                                <th>Dosage</th>
                                <th>Duration</th>
                                <th>Interval</th>
                                <th>Intake Period</th>

                              </tr>
                            <tr><td>1</td><td>test</td><td>test2 </td><td>test4</td><td>after food  உணவுக்குப் பிறகு</td><td>200 milliliter(s) 200 மில்லிலிட்டர் (கள்)</td><td>6 days 6 நாட்கள்</td><td>nil இல்லை</td><td>morning  evening காலை மாலை</td></tr></thead>
                            <tbody>
                            </tbody>
                          </table>
                      </div>
                    </div>
                    <div class="col-md-3 ml-auto">                        
                        <div class="text-center">
                          <div class="form-check">
                            <div class="clinic-text">Doctor's Signature</div>
                        </div>
                          <div class="form-check">
                              <div class="sheet-sign addSignName signature3">sample</div>
                          </div>
                        </div>                        
                    </div>
                    <div class="col-md-12">
                      <hr class="clinic-line">
                    </div>
                    <div class="col-md-12">
                      <div class="text-center">
                          <div class="form-check">
                            <div class="clinic-text">செந்திவேல் நாடார் நினைவு மருத்துவமனை</div>
                        </div>  
                        <div class="form-check">
                          <div class="clinic-footer-text">45 மெயின் ரோடு, எம். செந்திவேல் நாடார் பில்டிங், பணக்குடி - 627109 Ph: + 91-4637-245012</div>
                      </div>       
                      </div> 
                  </div>
                </div>
              </div>
            </div>          
          </div>
        </div>
      </div>

</body>
</html>

和PHP代码。

require_once 'dompdf/autoload.inc.php';
ob_start();    
use Dompdf\Dompdf;

$html = ob_get_contents();               
$dompdf = new Dompdf();
$dompdf->load_html($html);
$dompdf->render();      
$output = $dompdf->output();
file_put_contents('test.pdf', $output);

而结果应该看起来像这样...“样本页”

这就是我得到的...

“样本页”

CSS是否未加载，或者我做错了什么？任何帮助表示赞赏。

php html css fonts dompdf
1个回答
0
投票

Dompdf不是CSS友好的，并且与CSS 2.1兼容。

您使用引导程序框架和引导程序，使用现代的CSS，而对于dompdf来说则不愉快。

我建议您为此工作编写纯CSS代码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.