Jspdf: HTML Renderer cannot render images

[tsiegleauq]

HTML Renderer cannot rander images.
When the HTML renderer trys to render a imaga inside a -Tag, the resulting
PDF is blank.

Reproduce it using this fiddle

https://jsfiddle.net/147LooLc/

[Mario-Eis]

I'm experiencing the same issue and figured out, that opening the PDF in the callback does the trick. Have a look at https://jsfiddle.net/loebe/4kcesnfq/3/

UNFORTUNATELY when doing a 'dataurlnewwindow' in a callback, the browsers popup blocker jumps in. I couldn't figure out how to provide the PDF to the user in a new tab. In the context of a single page application where the application state should not be lost, thats quite an annoying bug.

Offtopic: PNGs look quite ugly with jsPDF. Try using JPG.

UPDATE: OK, here comes the nasty part:
It is indeed possible to open a new tab AND show images. A hack, but it works. BUT: with JPG only :laughing: Here only in Firefox, because JSFiddle hosts an iframe running the result. Chrome blocks location changes from within iframes. In real life it would work.
https://jsfiddle.net/loebe/4kcesnfq/2/

[kamov]

@Mario-Eis does this work for html table with images inside? can you provide an example?
thanks

[helloromero]

+1

[Uzlopak]

It works as expected. If you use images in fromHTML you have to load them asynchronously. So you have to use the callback parameter. The callback function is called when fromHTML in jsPDF loaded all images and generated the document.

var doc = new jsPDF('p', 'pt', 'a4', true);
    doc.fromHTML($('#renderMe').get(0), 15, 15, {
      'width': 500
    }, function (dispose) {
    doc.save('thisMotion.pdf');
    });

https://jsfiddle.net/147LooLc/5/

Close this issue please

[Uzlopak]

1567 Should be closed

reasons:

• It is not a bug because it behaves like expected
• solution was posted by me

[dash83bhabani]

Hi Arasabbasi
i am also facing same problem, image not comming . i have attached complete application for ur reference,
for content coping i have attched test2.html file. copy the content and paste on the viewer and then click on the showtoviewer button then click downloadresult button.

Thanks
Bhabani

Test.zip

Capture.zip

[babu0104]

Using Jspdf fromHTML image size different in pdf, Any solution?

[sammak1432]

1567 Should be closed

reasons:

• It is not a bug because it behaves like expected
• solution was posted by me

It is not working in your fiddle as well.
Image URL is invalid now so I've changed the image URL and then also the image is not displaying in PDF.

[tsiegleauq]

Image URL is invalid now so I've changed the image URL and then also the image is not displaying in PDF.

Probably due to CORS. The image I found there, on a domain that allowed Access-Control-Allow-Origin, is already down. It should work if you are able to control the origin of the image.

[PhHitachi]

@tsiegleauq is right,

because on CORS. the image can't be access on the request

im testing this on my localhost and i get this error because the image not uploaded on the same server and my localhost not allowed to get the image on other domain to fix it upload the image on the same server or handle the allowed domain on your cdn domain.