html2pdf.js: PDF does not show images from online

Hi , I use Angular 5 and this is used for my Angular method.

        var element = document.getElementById('document');
        var opt = {
            margin:       [10, 0, 10, 0],
            filename:     'document.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 2 },
            jsPDF:        { unit: 'mm', format: 'letter', orientation: 'portrait' }
        };
        html2pdf().from(element).set(opt).save();

After exporting a pdf, I am unable to see any images from online but it shows locally stored images. Here is the example of image online. https://s3.amazonaws.com/images.anterasoftware.com/5b6c5886622d5Screen_Shot_2018-06-27_at_10.37.03_AM.png

Please help, @eKoopmans Regards.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 17

Most upvoted comments

I got the same issue. But it’s quite different. PDF created but it show empty space, not image.

+12

phuocdh23 on Aug 19, 2018

function exportToPDF() {
  let elem = document.getElementById('pdf')
  let opt = {
    filename: 'sold_products.pdf',
    image: { type: 'jpeg' },
    html2canvas: { useCORS: true, scale: 2 }
  }
  html2pdf().from(elem).set(opt).save()
}

This my code 100% best working!

surojiddin on Sep 2, 2022

Converting the image to Base64 sorted me out.

bdwellons on Aug 27, 2019

I am also having a similar issue. Wont detect any external images at all.

As a workaround you can convert your images to Base64

For example.

Using

<template>
  <div id="sheet">
    <p>Hello
      <img src="{link to external Image}" />
    </p>
  </div>

  <button click.delegate="download()">Download</button>
</template>

Yields

489ms html2canvas: Finished loading 0 images []

Using Base64 (Or locally stored images)

  <div id="sheet">
    <p>Hello
      <img src="{image as base64}" />
    </p>
  </div>

272ms html2canvas: Added image data:image/gif;base64,...........

@axiom88-guru Does this do anything for you?

<img crossorigin="*" src="https://s3.amazonaws.com/images.anterasoftware.com/5b6c5886622d5Screen_Shot_2018-06-27_at_10.37.03_AM.png" />

Once again, You can only retrieve images with servers that have CORS enabled.

PTKC on Aug 22, 2018