在 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,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(); 
?>

解决方法

我认为你做不到。根据我使用 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>

html mpdf