bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
839 stars 306 forks source link

Download Org. chart has issue #400

Open sandipeq opened 1 month ago

sandipeq commented 1 month ago

Hello Folks!

Can anyone help me out, as I am facing issue while downloading Organization chart which has profile images coming from AWS S3 bucket?

So here is code I am using for download org. chart.

const downloadOrgChart = async () => { try { // setIsDownloading(true); await chart.exportImg({ full: true, save: false, onLoad: (base64) => { let link = document.createElement('a'); link.href = base64; // Append timestamp to URL link.download =${companyName}-organization-chart+ '.png'; // Set the image name with an extension link.click(); // Trigger the download // setIsDownloading(false); } }); } catch (error) { console.log('error: ', error); // setIsDownloading(false); } finally { // setIsDownloading(false); } };

We have added CORS policy in aws s3 bucket. But still facing issue with profile image missing in downloaded org chart. Please refer attached screenshot.

exaqode-organization-chart (15)

Your help is appreciated Thanks!

bumbeishvili commented 1 month ago

Hi, when exporting the chart, we are trying to load images as data URLs (base 64) and probably that's where problem happens.

Most probably problem happens here.

https://github.com/bumbeishvili/org-chart/blob/d9334eb2c1f9c7b0babebb5d05fa10987f2f2233/src/d3-org-chart.js#L1719-L1731

But of course I'll need interactive reproduced sample to understand what's happening