PDF does not show images : html2pdf library

Question

I use Angular 5 and html2pdf library which helps create pdf file. https://github.com/eKoopmans/html2pdf

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, useCORS: true },
    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, Regards.

Hilltop

useCORS: true solved for me – Honoria

Answer 1

I saw you opened an issue on their github. I combed through the other issues and saw someone with a similar issue to yours. There are 3 or 4 proposed solutions here but I think the most promising is changing jpeg to jpg since that is not supported by html canvas. Here is the related github issue. https://github.com/eKoopmans/html2pdf/issues/105

Dumbstruck

I tried to change 'jpeg' to 'jpg' but it didn't work. I think the problem is because I am rendering cross-domain images which aren't stored on our server. – Hilltop

Answer 2

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

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

Menstruation

Answer 3

I resolved this issue by CORS settings like this

 exportToPDF() {
        var opt = {
            margin: 0,
            filename: 'time_sheet_report.pdf',
            image: { type: 'jpeg', quality: 0.20 },
            html2canvas: { scale: 2,useCORS: true },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'p' }
        };

        html2pdf().set(opt).from(this.$refs.document).save();
}

Crinum

It's not working and also showing some bracket mission errors. – Quadric

@NarenVerma yes the closing bracket was missing at the end. – Crinum