将 html+css 内容添加到 mPDF

Question

I am using mPDF to add HTML+css contents to already generated/created PDF. The HTML contents are added successfully but there are no css content present in it. That is, it should display a circular progress bar (as shown below) but unfortunately it does not generate it. My assumption is that it does not take in css input, even though I am trying to import it as mentioned in their documentation. What is the issue here?

EDIT: I even added the stylesheet to the html code here but still it does not take the input.

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

Outside the php tag, here is the html and css code given separetly:

 .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>

This progress bar does not get generated inside the PDF.

Answer 1

Best solution is to use stylesheets. See example below:

             <?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;

             ?>

Assign html in $mpdf and then include it in mpdf.php file

Hope it works,! If not, tell us we are here to give more solutions!!