React-vis: download as picture

[hybrisCole]

I want to create some Excel or PDF files using generated graphics from react-vis, is that possible?

Thank you!

[mcnuttandrew]

It sort of is! There isn't a automated download button, svg crowbar from nyt can be really helpful http://nytimes.github.io/svg-crowbar/. (This is of course assuming that you are only using svg components, and not canvas or dom).

[balthazar]

We could potentially use canvas.toDataURL('image/png') and dom-to-image

[jckr]

there are other non react-vis ways to do this so I think the library shouldn't implement its own way of solving this problem. closing for now

[cheneyshreve01]

For other folks searching for this (mostly jQuery examples out there), you can do this using html2canvas and pure JS:

• npm install html2canvas
• import html2canvas from 'html2canvas'
• within your render function, where you have your react-vis plot(s) name the div or other element you want to save with id="canvas",e.g.
• in main body of your component, it's easiest (I think) to have two functions, one for saving, one for downloading to desktop (or whatever you want)

saveImage(){
  var input = document.getElementById('canvas');
  html2canvas(input)
  .then((canvas) =>{
    let imgData = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
     this.downloadURL(imgData);
  });
}

downloadURL(imgData){
  var a = document.createElement('a');
  a.href = imgData.replace("image/png", "image/octet-stream");
  a.download = 'graph.png';
  a.click();
}

render(){
// your code...

return (){

<div id="canvas">
<XYPlot>
<!--your react-vis stuff here...-->
</XYPlot>
</div>
<button onClick={() => this.saveImage()}>Save</button>

}
}

PS- would be awesome if react-vis would add an export option :)

[ifordesmith]

Nice one Cheney thanks worked a treat ;-)

[igorbragaia]

I'm facing a problem with @cheneyshreve solution: it seems that css is missed so there are dark areas, text messed on the image downloaded. I've seen that css problems are common with html2canvas but have you guys faced this same issue with this solution for charts downloading?

[keithalpichi]

@cheneyshreve Thank you for sharing that solution.

I also have the same goals as the OP but don't need to show the chart in the browser before exporting it as an image. I only want to show a download button then open a new tab with the PDF that contains the embedded images.

@jckr What are these different ways you say I can achieve this?

[mathewleland]

I published an npm package to deal with this issue: npm i export-svg-with-styles

It is designed to be able to extract your svg WITH their styles. A lot of the packages I found out there wouldn't grab your styles appropriately all the time. I hope this saves some people some headaches in the future! It also has some configuration options, like adjusting width/height/filename/svgnode, and the instructions are all here https://www.npmjs.com/package/export-svg-with-styles

[MGItkin]

@mathewleland export-svg-with-styles worked perfectly for this. So many of the libraries I tried would not properly grab the style. I wish libraries like html2canvas used your tool for saving SVG so the legend in the graph image was saved as well...

For anyone else trying to accomplish this, here is a code sample using export-svg-with-styles The ref is on a div that wraps XYPlot

const graphRef = useRef<HTMLDivElement>(null);
const onSavePng = async () => {
    const rect = element.getBoundingClientRect();
    const options = {
      width: rect.width,
      height: rect.height,
      svg: element,
      filename: props.graph.name
    };
    downloadSVG(options);
};

[exlexer]

Has anyone dealt with this issue while also wanting to include the default react-vis legend (DOM elements) with the download? I'm currently targeting the parent container and converting to canvas with html2canvas and downloading with ReImg as follows:

html2canvas(chartRef.current).then(canvas => {
    ReImg.fromCanvas(canvas).downloadPng(`${chart.title}.png`);
});

This allows the download of the SVG with the accompanying DOM elements, however, it does not keep the CSS styles of the SVG.

Has anyone been able to download SVG and DOM with all containing styles?

[mathewleland]

@exlexer did you see that npm package I put out (above)?

[exlexer]

@mathewleland yes, It works fantastic for SVG as the parent component, but when an SVG is the child of a DOM based directive it fails out, so the following doesn't work:

<div>
  <div> ...DOM based legend </div>
  <svg> ...SVG based chart </svg>
</div>

[mathewleland]

Ah, I see! That's a trickier situation, and that is true my npm package can't accomodate that. I had to do that, too, personally, and I combined the package with watermarkjs to append the base chart. It's a tricky workaround, but it might be able to help you!