在 mPDF 中调整 css 大小

Posted 2023-05-07

【中文标题】在 mPDF 中调整 css 大小

【英文标题】：Resize css in mPDF

【发布时间】：2021-04-07 15:13:19

【问题描述】：

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

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

Stretched Progress

我假设这与 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(); 
?>

【参考方案1】：

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

【讨论】：

那么有什么替代方法可以实现这一目标？我只想创建一个进度圆形条。

进度条需要实时更新吗？喜欢您签署一部分并且进度增加吗？如果不是，我只会使用 SVG 或某种图像

不，不需要。我对 css 和 svgs 没有经验。你能用css代码发布答案吗？

我更新了我的答案。方法可能已经过时，但对我有用

谢谢，但你有动态 svg 圈子的链接吗？