PDF does not show images from online

[codemaster730]

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.

[codemaster730]

I am trying to render cross-domain image which is exactly stored in amazon s3. Please find the attached screenshot , any advice would be appreciated.

[phuocdh23]

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

[dandocan]

I have the same issue as solomondn on React and can't work around it since I can't store the images locally.

[dandocan]

//this is my code for it

printDocuments() {
        var opt = {
            margin: 1,
            pagespilt: true,
            filename: 'download.pdf',
            image:{type:'png'},
            html2canvas: {scale: 2},
            // jsPDF:{ unit: 'in', format: 'letter', orientation: 'portrait' }
        }
        var input = document.getElementById("pdfContainer");
        console.log(input)
        html2pdf(input, opt)
    }

[PTKC]

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.

[codemaster730]

@PhilipTKC thanks for your response. I already solved this problem by enabling CORS on S3. Thanks.

[khaukheng]

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

I got the exact same issue with solomondn, have you fix it?

[bdwellons]

Converting the image to Base64 sorted me out.

[gvsakhil]

@bdwellons can u share me the code u used to convert images to base64?

[paytah232]

@bdwellons +1 to the code. I tried in JS doing img.src=, the html page showed the image correctly, but it still wouldn't show in the generated PDF.

[brunaschneiders]

@bdwellons +1 to the code. I tried in JS doing img.src=, the html page showed the image correctly, but it still wouldn't show in the generated PDF.

Hi! do you have the code that can be used to convert images to base64?

[InSyn]

Try to specify "allowTaint" parameter to "true" in html2canvas object

opt = { margin: 0, filename: "myfile.pdf", image: { type: "jpeg", quality: 0.98 }, html2canvas: { allowTaint: true, scale: 2 }, jsPDF: { unit: "in", format: "a4", orientation: this.setup.orientation } };

[PrasanthPerumalsamy]

In Angular it is worked for me after doing this...

1. add ' crossorigin="" ' in <img src="" crossorigin="" > tag
2. add ' {useCORS: true} ' in html2canvas --> html2canvas(document.querySelector('#pdf'), {useCORS: true})

[Ankit-Mishra07]

Thank you @PrasanthPerumalsamy

[surojiddin]

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!

[cgutierrez365]

To anyone wondering how to enable CORS (Cross-origin resource sharing) on Firebase storage so your app can access photos saved there using this plugin by simply writing something like <img src=https://firebasestorage.googleapis.com/path-to-image>, follow these instructions to enable CORS. You will need to create a cors.json file with the contents in the provided example (or replace the * in "origin": ["*"] with the path to your app's domain. From what I understand specifying the specific domain is more secure because otherwise any domain, including malicious ones, can access data from your firebase storage). You can keep the cors.json file in your project's root directory. Then after installing the gsutil command line tool, you can run gsutil cors set cors.json gs://<your-cloud-storage-bucket> like the instructions say. You can find what <your-cloud-storage-bucket> is for your specific project by logging into your project on console.firebase.google.com and navigating to Storage>Files and copying what should look similar to gs://exampleproject.appspot.com.

Here's a link to an additional resource you may find useful: https://stackoverflow.com/a/37765371/17246058

You will also need to make sure you set useCORS: true in your pdf options:

const pdfOptions = {
          filename: 'healthreport.pdf',
          margin: [10, 10, 10, 10], // Replace with the desired margins (top, right, bottom, left)
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { scale: 2, useCORS: true },
          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
 };

As an example, you can create a pdf with this plugin by then putting: const pdfBlobPromise = html2pdf().set(pdfOptions).from(html).output('blob');

[AhmedMuhammedElsaid]

I had the same issue and the following configs work with me just fine // @ts-ignore import("html2pdf.js").then(html2pdf => { html2pdf .default() .from(wrapper) .set({ filename: "analytics.pdf", html2canvas: { dpi: 300, letterRendering: true, useCORS: true, scale: 2, }, jsPDF: { unit: "in", format: "letter", orientation: "portrait" }, pagebreak: { mode: "avoid-all", before: "#page2el" }, image: { type: "jpeg", quality: 1 }, }) .save()