如何使用 html2pdf 从 dataURL 下载 PDF 格式的图像？

Question

I am creating a checklist containing both text and images. Using html2pdf, the PDF downloaded can only show the text. I have converted the image to base64 but how do I insert it into the PDF file alongside the text?

Note: The image is obtained from Firebase storage.

HTML:

 <button type="button" class="btn btn-success btn-lg" onclick="GenPDF()">Download PDF</button>
<form>
<table>   
      <tr  style= "background-color: #dddddd">
        <td>Remarks:</td>
        <td>
            <%= NFBSectionOneRemarks%>
        </td>
      </tr>
      <tr style= "background-color: #dddddd">
        Image:
      </tr>
        <tr style= "background-color: white">
        <td>
          <canvas width="600" height="400" id="image1"></canvas>          
        </td>
      </tr>
<table>
</form>

JavaScript:

   var dataURL;
   img.onload = function(){        
   canvas.height = canvas.width * (img.height / img.width);
   var oc = document.createElement('canvas'),
   octx = oc.getContext('2d');
    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);      
    };                                      
   img.src = imageurl;  
   var canvas = document.getElementById('image1');
   dataURL = canvas.toDataURL();
   console.log(dataURL); 
    });
  });
  }).catch((error) => {
   console.log(error)

  });

function GenPDF(){
    event.preventDefault();
    var element = document.getElementById ('form');
    var opt = {
   margin:       1,
   filename:     'file.pdf',
   image:        { type: 'png', quality: 0.98 },
   html2canvas:  { scale: 2 },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
 };
 
 // New Promise-based usage:
   html2pdf().set(opt).from(element).save();

}

Answer 1

We can use the below approach to add an image in pdf while generating each page.

       let header = null;
       var HeaderImgUrl = 'sample.jpg';
               
       getDataUri(HeaderImgUrl, function (dataUri) {
           header = dataUri;
               console.log("logo=" + header);
           });
       
       function getDataUri(url, cb) {
               var image = new Image();
               image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain
               image.onload = function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                   //next three lines for white background in case png has a transparent background
                   var ctx = canvas.getContext('2d');
                   ctx.fillStyle = '#fff';  /// set white fill style
                   ctx.fillRect(0, 0, canvas.width, canvas.height);
                   canvas.getContext('2d').drawImage(this, 0, 0);
                   cb(canvas.toDataURL('image/jpeg'));
              };
              image.src = url;
           }
          var opt = {
                margin: [1.3, .3, 1.7, .3], //top, left, buttom, right
           
               filename: 'test.pdf',
               image: { type: 'jpeg', quality: 1 },
               html2canvas: { scale: 4, allowTaint: false, useCORS: true },
               jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' },        
               pagebreak: { mode: 'avoid-all', after: '.pageBreak' }
          };   
            html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) {
               var number_of_pages = pdf.internal.getNumberOfPages()
               var pdf_pages = pdf.internal.pages          
               for (var i = 1; i < pdf_pages.length; i++) {
                  pdf.addImage(header, 'JPEG', 0, 0, 11, 1);//add image at desired position(11 and 1 are values in inches for an A4 page)
               }        
            }).save();