首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用DomPDF将HTML转换为PDF的问题

使用DomPDF将HTML转换为PDF的问题
EN

Stack Overflow用户
提问于 2020-06-01 13:41:45
回答 1查看 615关注 0票数 1

我试图转换一个超文本标记语言的内容与CSS和自定义字体和图像到PDF使用DomPDF。

我需要添加这些自定义字体也对齐必须是完美的,因为内容是为响应式的外观,我不能修改他们的大部分。

以下是HTML内容。

代码语言:javascript
复制
<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代码。

代码语言:javascript
复制
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没有加载还是我做错了什么?任何帮助都是非常感谢的。

EN

回答 1

Stack Overflow用户

发布于 2020-06-01 14:15:50

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

你使用bootstrap框架和bootstrap,使用现代的css,这对于dompdf并不令人愉快。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62126322

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档