search

Xportability / css-to-pdf

Convert any HTML page or region to PDF - supports CSS, SVG, embedded XML objects, and more..
http://www.cloudformatter.com/CSS2Pdf
206 stars 78 forks source link

Cannot render images generated by plotly #71

Open bondeanikets opened 7 years ago

bondeanikets commented 7 years ago

My div (which corresponds the id 'Usage') consists of plotly-generated images along with some text. The text before the image is present in the pdf generated, but the images and the later text is absent. Tried {embedLocalImages: 'true'} as well, but in vain. Please suggest a solution.

Thanks

kbrown01 commented 6 years ago

Can you create a fiddle please? It is hard to speculate without seeing the sample

kbrown01 commented 6 years ago

I did create a simple ploty plot and while things do print, I do see issues that may have to do with svg's inside svg's (plotly uses this extensively).

See https://jsfiddle.net/c1kt3r82/220/

bondeanikets commented 6 years ago

Thanks for the fiddle. So, is there any solution that you can suggest?

kbrown01 commented 6 years ago

Yes. I extracted the SVG from the page and that formats. Good news. So I tracked backwards to see what is happening and I know what is wrong, how to fix it will take some thought.

The software works by creating a hidden div in the page and then scrapes the HTML DOM and puts it into that div and grabs the results and sends to the formatter. It has to operate this way because all CSS needs to be resolved.

When that happens, something in the plotly SVG that is embedded in the other SVG returns a width/height of 0. Here is a side by side comparsion:

image

What you would have to do is to remove them or replace them with the correct width. I stopped the process and fix the width/height and it works:

image