search

dabeng / OrgChart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
2.87k stars 772 forks source link

Bad export #336

Open YAGrand opened 6 years ago

YAGrand commented 6 years ago

Hi, I try to export my chart to png, as a result I get cropped image. mychart

dabeng commented 6 years ago

Hi @YAGrand , this is a huge orgchart both in horizontal direction or vertical direction. Please try to export it to the png picture again.

YAGrand commented 6 years ago

Normal export occurs only if the main container position = initial

YAGrand commented 6 years ago

I solved the problem by adding directives to the css

#chart-container.canvasContainer{
  position: initial;
}
YAGrand commented 6 years ago

New problem. How to make a picture sharper? unsharp_chart

scrobbleme commented 6 years ago

@YAGrand Try the PDF export. Still an embedded image, but works much better for me than PNG.

Edit: I also have custom html (see nodeTemplate) for the content. I think this is the main reason it looks better (sharper) for me. The default template is somehow blurry.

From the doc:

(3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce jspdf and set "exportFileextension" option to "pdf".

YAGrand commented 6 years ago

Tried, but not exported to pdf. See gif: nopdfexport png export work: pngexport

scrobbleme commented 6 years ago

You are right. Exporting is not soo nice. You may try another font, avoid rounded corners, box and text shadows... But I think it is not orgChart to blame. It is propably the browser and html2canvas... (btw. are you already using the latest 1.0.0-a9 of html2canvas?)

Another way, you maybe can try and report back: use an html2pdf or html2image converter at the backend. If you are using PHP, you may try this one: https://html2pdf.fr/en/home

YAGrand commented 6 years ago

Using html2canvas 0.5.0-beta3 Tried html2canvas 1.0.0-alpha.9, not woking pdf and png export.

Another way, you maybe can try and report back: use an html2pdf or html2image converter at the backend. If you are using PHP, you may try this one: https://html2pdf.fr/en/home

Does it support the transform property?

scrobbleme commented 6 years ago

Strange, I'm using html2canvas 1.0.0 a9, with jspdf 1.3.5 and orgChart 2.0.15. (in Opera, Chrome, Firefox, Edge it is working for me)

Don't knwo if it is supporting transform, maybe just try ;)

todorivanov commented 6 years ago

@YAGrand maybe you should check the browser console. Are there any errors? Sometimes, when the image is too large, the browser may not be able to transform it to canvas. Check and see if there are any errors.

dabeng commented 6 years ago

Hi @YAGrand , feel free to play around this Demo and put forward your new question.