0

Below is my PHP code to convert HTML into PDF, but images are not displaying under PDF. I tried to use both local paths as well as server URLs as well, both are not displaying images under PDF.

<?php

use Dompdf\Options;
//add autoload.inc.php
require_once "./dompdf/autoload.inc.php";
$options = new Options();
$options->set('isRemoteEnabled', true);

// reference the Dompdf namespace
use Dompdf\Dompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();

//$dompdf->loadHtml($html);
$page = file_get_contents("certificate.html");
$dompdf->loadHtml($page);

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream("training-certificate", array("Attachments"=>0));
?>

Below is my HTML file code:

<style> 
   div.background {
      background: #ffffff;
      border: 5px solid black;
      margin: 10px;
    }
    
    div.transbox {
      margin: 3px;
      background-color: #ffffff;
      border: 1px solid black;
    }
    
    div.transbox p {
      margin: 4%;
      color: #000000;
    }
    #middle {
      margin: 5px;
      background-color: #ffffff;
      border: 1px solid #fff;
    }
    body{
       background-color: #f6f6f6;
    }
    .logowhite{
     float: right;
    }
    .logo {
       clear: right;
       text-align: center;
   }
      </style><link href="https://vip-organon-us-hcp-com-develop.go-vip.net/nexplanontraining/wp-content/themes/twentytwentyone-child/assets/css/font-awesome.min.css" media="all" type="text/css" rel="stylesheet"/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
   <link href="https://vip-organon-us-hcp-com-develop.go-vip.net/nexplanontraining/wp-content/themes/twentytwentyone-child/assets/css/main.min2.css" media="all" type="text/css" rel="stylesheet"/>         
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><body id="thank-you" class="base"><div id="middle">
   <div class="background">
      <div class="transbox">
         <div  class="logowhite"> <img src="https://vip-organon-us-hcp-com-develop.go-vip.net/nexplanontraining/wp-content/uploads/sites/2/2022/03/org_logo.png" alt="" /></div> 
         <div class="logo"> <img src="https://vip-organon-us-hcp-com-develop.go-vip.net/nexplanontraining/wp-content/uploads/sites/2/2022/03/nexplanon_logo.png" alt="" />  
           <p style="font-size:2rem;color:#00F;text-transform: uppercase;">'.$fname.' '.$lname.'</p> 
           <p style="font-size: 1.25rem;">This certificate serves as confirmation of the completion of the Mandatory Training Module<BR>
             on the updated insertion and removal procedures for NEXPLANON.</p> 
            
             <div style="width: 80%;margin: auto;"> 
               <p style="float: left;font-size: 1.25rem;"><B>Training Date:</B> <span style="color: #00F;">'.$date.'</span> </p>
               <img style="float: right;" src="https://vip-organon-us-hcp-com-develop.go-vip.net/nexplanontraining/wp-content/uploads/sites/2/2022/03/signature.png" alt="" />   </div>
           
           </div>
   
      <p style="clear: both;margin-bottom: 0%;"><BR>I attested that I completed the Organon-sponsored Mandatory Training Module on the updated insertion and removal procedures for NEXPLANON in its entirety. I understand that only healthcare providers who have completed the
       Organon-sponsored Clinical Training Program for NEXPLANON may order, insert, and remove NEXPLANON.<BR><BR>
       I certified that I am authorized to perform the procedures entailed in the insertion and removal of NEXPLANON in the
       jurisdiction where I practice. I attest that if there are specific state requirements in the state where I practice, I have met all appropriate state conditions including but not limited to collaborative or signing agreement with an MD/DO.<BR><BR>
       If I am a resident or student in advanced practice training, I understand that I should only administer NEXPLANON under the supervision of an attending healthcare provider who has also been trained on the procedures to insert and
       remove NEXPLANON.</p>
     
      <div style="margin-bottom: -2%;">
      <p style="font-size: 0.7rem;float: left;">© 2021 Organon group of companies. All rights reserved. ORGANON and the ORGANON Logo are trademarks of the Organon group of companies.</p>
      <p style="float: right;font-size: 0.7rem;">US-XPL-115639 12/21</p>
     <p style="clear: both;margin-bottom: 0%;"> </p>
     </div>
      
     
     </div>
   </div>
   </div></body>

Please suggest, I already tried the TCPDF library as well but there are some very limited CSS that's why I am using DOMPDF for now.

Gopal
  • 3
  • 4

1 Answers1

1

Since URLs can point anywhere and that is not how pdfs are supposed to work, you have to embed your whole image by encoding it as base64

like this example here https://stackoverflow.com/a/8499716/5956589

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

Note that the format is data:[<mediatype>][;base64],<data>

Refer to https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs to fully understand how this works

Richard Muvirimi
  • 639
  • 9
  • 14
  • Awesome, I have embedded our whole image using the online website "https://base64.guru/converter/encode/image" and there are other websites too. so is that fine we can generate embed code online from any website? and also will be working on our live website too? – Gopal Mar 19 '22 at 09:42
  • @Gopal yes that can work also though you can do it in code on the fly by replacing the image URLs with base64 – Richard Muvirimi Mar 19 '22 at 09:46
  • One last question is, Now my pdf is generated but It's divided into 2 pages instead of one page. Is there any code to adjust the PDF in one A4 page in DOMPDF? and my pdf is directly downloaded instead of open preview into browser why? – Gopal Mar 19 '22 at 09:53
  • Please mark as answer, when satisfied. to make one page set image size on the image tag, and for downloading you have to ask a new question as browsers by default download pdf files and not open them directly, you might look into pdf.js – Richard Muvirimi Mar 19 '22 at 10:01