CODEWITHSUNDEEP
angulartypescriptjspdfhtml2canvashtml2pdf
CHRIS LEE
CHRIS LEE

Reputation: 786

PDF does not show images : html2pdf library

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.

Upvotes: 7

Views: 16651

Answers (3)

khateeb
khateeb

Reputation: 486

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();
}

Upvotes: 1

Prasanth
Prasanth

Reputation: 51

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})

Upvotes: 2

MorningDew
MorningDew

Reputation: 503

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

Upvotes: 5

Related Questions