首页 > 解决方案 > 在 mPDF 中调整 css 大小

问题描述

我正在创建一个如下所示的进度条: Perfect Progress

现在,我正在使用 mPDF 将此进度条添加到 PDF 中,进度条如下所示:

延伸进度

我假设这与css文件有关。如果是,我可以在这里添加一个简单的代码来重置进度条的宽度和高度吗?

<?php
use setasign\Fpdi\Fpdi;

session_start();
ob_start();

require_once __DIR__ . '/vendor/autoload.php';

require_once('FPDI/autoload.php');
require_once('fpdf/fpdf.php'); 
require_once('FPDI/Fpdi.php'); 

$pdf = new \Mpdf\Mpdf();

$pdf->AddPage(); 

$pdf->setSourceFile('file.pdf'); 

$tplIdx = $pdf->importPage(1); 

$pdf->useTemplate($tplIdx, 0, 0, 297, 420, true); 

$html = '
<!-- default -->
<div class="clearfix">

    <div class="c100 p12 small">
        <span>12%</span>
        <div class="slice">
            <div class="bar"></div>
            <div class="fill"></div>
        </div>
    </div>

</div>

';

$stylesheet = file_get_contents('css/circle.css');
$pdf->WriteHTML($stylesheet,1);
$pdf->WriteHTML($html, 2);

$pdf->Output("NewFile.pdf", "D");
ob_end_flush(); 
?>

标签: phphtmlcssmpdf

解决方案


我不认为你能做到这一点。根据我使用 mPDF 的经验,它的 CSS 非常严格,这里是受支持标签的列表

https://mpdf.github.io/css-stylesheets/supported-css.html

老实说,我不会试图在这上面浪费时间。mPDF 使使用 CSS 设置任何样式变得过于困难

这种方法可能有点过时,但如果我不想要任何问题,这就是我在 mpdf 中的做法。

<table cellpadding="0" cellspacing="0">
   <tr>
     <td style="width:yourSetPixelValue">
        <img style='width: 100%' src='yourSvgOrImg'>
     </td>
     <td style="width:yourSetPixelValue">
        <div style='width: 100%'>some other content thats on the same row or x-axis</div>
     </td>
   </tr>
</table>

推荐阅读