html2pdf.js: PDF does not show images

Hi,

I am use vuejs.

This is usage for the my vue method.

html2pdf(reportContent, { margin: [5, 5, 11, 5], filename: ${this.data.infoCard.reportType}-${this.data.infoCard.reportTitle}-${this.dateRange}.pdf, html2canvas: { dpi: 300, letterRendering: true }, jsPDF: { unit: ‘mm’, format: ‘a4’, orientation: ‘portrait’ } });

Please help.

@eKoopmans

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 18

Most upvoted comments

try with this html2canvas config:

html2canvas { dpi: 300, letterRendering: true, useCORS: true }

useCORS tries to load images from a server with CORS.

+41

guttenberger on May 4, 2018

i have the same problem, i tried the last exemple but not working.

Use base64 into img src

+12

YaroslavKozhemiaka on Apr 23, 2020

Three things got me fixing this:

Allow CORS in your server. In my case I use AWS S3, so I went to configuration and there I followed the instructions
Add a “crossorigin” attribute with a “*” value to your img html tags. I used javascript for this:

let imagenes = document.getElementsByTagName(“img”); for (let i = 0; i < imagenes.length; i++) { imagenes[i].setAttribute(“crossorigin”, “*”);

Add useCORS: true as an html2canvas option

christiansaavedra on May 20, 2020

If you are using firebase then check this solution, https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin

aminikhil on Aug 5, 2020