【发布时间】：2020-09-19 09:44:10
【问题描述】：
我正在尝试使用 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 没有加载还是我做错了什么？ 任何帮助表示赞赏。
【问题讨论】：