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

Issue with long google chart #37

Closed ikoukuhn closed 8 years ago

ikoukuhn commented 8 years ago

I have a chart that want to be exported to PDF. The problem is if the chart is too long, the exporter doesn't format it to the print page. Here's my jsfiddle: https://jsfiddle.net/Ljmhvrp4/ (I changed the div width to match with my screen resolution, but actually I'm using width:100% on my project) And here's the result link: https://drive.google.com/open?id=0B4vXYJx2hoDpclJWcTZnZ0dPUWM Is there any way to shrink the chart without changing the webpage?

kbrown01 commented 8 years ago

Question: Based on the fiddle, are you only formatting a single chart to PDF? Or do you desire a whole page with content around it?

kbrown01 commented 8 years ago

The reason I ask is that there is a mode where you can just output the first SVG inside the div and the backend will use the exact dimensions of the svg to create the PDF. If I add srctype:'svg' to your example I get this:

image

Updated fiddle: http://jsfiddle.net/Ljmhvrp4/1/

ikoukuhn commented 8 years ago

Yes, I only want to print just one chart. But the problem is my client want the paper format to be A4 landscapped.

ikoukuhn commented 8 years ago

The srctype:svg seems to override the print page formatting, can I just shrink the chart to fit the A4 landscapped format?

kbrown01 commented 8 years ago

Yes. Sure you can. The chart is the size of the div you are printing which is way larger than your page. Implement Javascript to shrink the size of the chart before printing and then return it to its normal size after.

You cannot have both.

At the moment you say print, your SVG inside the DOM looks like this:

image

It is 1360 wide and 400 high,. way larger than your page. If you want it to scale down to fit you page then you have to implement Javascript to shrink it to fit appropriately to your page, then restore its dimensions. The software is only doing what the code in your web page says and that screen shot says it all -- it is the exact width and height.