将 html+css 内容添加到 mPDF

Posted 2023-05-07

【中文标题】将 html+css 内容添加到 mPDF

【英文标题】：Adding html+css contents to mPDF

【发布时间】：2021-04-07 12:10:21

【问题描述】：

我正在使用 mPDF 将 html+css 内容添加到已生成/创建的 PDF 中。 HTML 内容已成功添加，但其中没有 css 内容。也就是说，它应该显示一个圆形进度条（如下所示），但不幸的是它不会生成它。我的假设是它不接受 css 输入，即使我试图按照他们的文档中提到的那样导入它。这里有什么问题？

编辑：我什至在此处将样式表添加到 html 代码中，但它仍然不接受输入。

<?php
use setasign\Fpdi\Fpdi;

session_start();
ob_start();

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

require_once('FPDI/autoload.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 = "

<style>
.flex-wrapper 
  display: flex;
  flex-flow: row nowrap;


.single-chart 
  width: 33%;
  justify-content: space-around;


.circular-chart 
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;


.circle-bg 
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;


.circle 
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;


.circular-chart.orange .circle 
  stroke: #ff9f00;


.percentage 
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;

</style>

<div class='html-content'>
    <div class='flex-wrapper'>
        <div class='single-chart'>
            <svg viewBox='0 0 36 36' class='circular-chart orange'>
                <path class='circle-bg' d='M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831' />
                <path class='circle' stroke-dasharray='12, 100' d='M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831' />
                <text x='18' y='20.35' class='percentage'>12%</text>
            </svg>
        </div>
    </div>
</div>

";

$pdf->WriteHTML($html);

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

在php标签之外，这里是分别给出的html和css代码：

.flex-wrapper 
  display: flex;
  flex-flow: row nowrap;


.single-chart 
  width: 33%;
  justify-content: space-around;


.circular-chart 
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;


.circle-bg 
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;


.circle 
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;


.circular-chart.orange .circle 
  stroke: #ff9f00;


.percentage 
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;

<div class="html-content">
    <div class="flex-wrapper">
        <div class="single-chart">
            <svg viewBox="0 0 36 36" class="circular-chart orange">
                <path class="circle-bg" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
                <path class="circle" stroke-dasharray="56, 100" d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831" />
                <text x="18" y="20.35" class="percentage">56%</text>
            </svg>
        </div>
    </div>
</div>

此进度条不会在 PDF 中生成。

【问题讨论】：

请分享更多关于您想要实现的目标以及您尝试调试问题的详细信息

@NicoHaase 当我添加到此 php 以生成 pdf 文件时，$html 标记内的样式表由于某种原因不起作用。当您分别运行 HTML 和 CSS 时，这是应该得到的输出（请参阅问题中的内容）。生成了一个黄色进度条，但是当我将相同的 HTML+CSS 代码添加到我的 php 中时，在 PDF 中生成了一个黑色圆圈。

请通过编辑为您的问题添加所有说明

@NicoHaase 我已经编辑过了。

有人知道怎么回事吗？

【参考方案1】：

最好的解决方案是使用样式表。 请参见下面的示例：

             <?php

             $html = $divPrint;

             include('mpdf.php'); // including mpdf.php
             $mpdf=new mPDF();
             $stylesheet = file_get_contents('pdf.css'); //this is ur external css
             $mpdf->WriteHTML($stylesheet,1);
             $mpdf->WriteHTML($html,2);
             $mpdf->Output();
             exit;

             ?>

在 $mpdf 中分配 html 然后将其包含在 mpdf.php 文件中

希望它有效！如果没有，请告诉我们，我们在这里提供更多解决方案！

【讨论】：

您好，是的，我一开始就使用它，但它根本不起作用。我应该得到一个写有百分比的黄色圆圈，但这里我只得到一个黑色圆圈。

请分享更多细节。为什么将样式表放入另一个文件会有帮助？从 mPDF 的角度来看，没有区别