mPDF results from PHP with variables via buffer

Cannot seem to get this to work, everything from the buffer is showing but no PDF generated, if its all in the php as $html = 'Hello World' it generates fine?

-- REVISED QUESTION -- included example code to display certificate background image in generated PDF - results are blank PDF...

screen shot of div.php run by itself.

-- REVISED ENTIRE CODE EXAMPLE --

<?php error_reporting(E_ALL);?>
<?php 
include $_SERVER['DOCUMENT_ROOT'].'/TestCert/mpdf/mpdf.php';
$mpdf=new mPDF();
//include ('div.html'); 
ob_start();  
include ('div.php'); 
?>


<?php 
$html = ob_get_contents();
ob_end_clean();
// LOAD a stylesheet 1
$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet,1);    // The parameter 1 tells that this is css/style only and no body/html/text
$mpdf->WriteHTML($html,2);
$mpdf->Output();
exit; 
?>

-- CSS --

H1 {
font-size:14pt;
font-family:arial;
text-align: center;
}

H2 {
font-size:14pt;
font-family:arial;
text-align: center;
}

.certificate {
background-image: url("cert.png");
background-size: 100% 100%;
height: 594px;
width: 1056px;
padding: 50px;
position: relative;
}

.certDate {
font-size:14pt;
font-family:Trebuchet MS;
font-weight:normal; 
position: absolute;  
bottom: 50px; 
right: 170px;   
}

.certHead {
font-size:40pt;
font-family:Trebuchet MS; 
position: absolute; 
top: 130px; 
left: 0; 
width: 100%;  
}

.certBody {
font-size:28pt;
font-family:Trebuchet MS;
font-weight:normal;
position: absolute; 
top: 220px; 
left: 0; 
width: 100%;  
}

-- div.php --

<?php
global $current_user;
$FName = "john";
$LName = "doe";
$FullName = "John Doe";
?>  

<HTML>
<BODY>

<SCRIPT>

var namedata = <?php echo json_encode($FName . ' ' . $LName); ?>;

    document.write("<div class='certificate'>");
    document.write("<H2 class='certHead'>Certificate of Completion</H2>");
    document.write("<H2 class='certBody'>This Certifies That</br>");
    //document.write("" + "John Doe" + "<br><br>");
    document.write("" + namedata + "<br></br>");
    document.write("Has Successfully Completed The<br>");
    document.write("<I>" + "Triage System Course" + "</I></H2></br>");
    document.write("<H2 class='certDate'>September 11, 2015</H2>");
    document.write("</div>");   
    document.write('<center> <input type=button onClick="window.print()" value="Print This Page"/> </center>');

    </SCRIPT>

</BODY>
</HTML>

回答1:

You are generating the content by using Javascript. This is interpreted by your browser but not by mPDF (which just translates HTML+CSS to PDF).

Try generating the HTML in PHP without Javascript, that should work.

回答2:

only resolution I was able to make work was to put the style inline in the <div> and not call it from external style.css file... not sure why one works over the other but mPDF doesn't seem to like this one class in the style (all the others work fine...)

This works:

<div style = "background-image: url('cert.png'); 
    background-size: 100% 100%; 
    height: 594px; 
    width: 1056px; 
    padding: 50px; 
    position: relative;">
Hello World
<div>

This does not:

<div class="certificate">
Hello World
</div>