I am new to react.js and Javascript. My job is to add a download button above the image, once click, the SVG format image will be downloaded. I have one method works, I wrote download function into the image generation file, and call the function. But as long as I need to add more buttons, I found the image svg file is inside the html page. Why I can not directly save svg content into a file. For example: the button download content is in the On my react.js code, the RankedBarchart render is what I want. Is there some way I can directly get the content, or content for download.

 <h2>
   BMC values: sorted by {chartName}{' '}
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <button onClick={plot_download_form} class="btn btn-primary">
      Export plot
   </button>
 </h2>
 <RankedBarchart
   // the visualization function not affect the plot
   // the selectedAxis is the main function to show tables,
   // check the RankedBarchart file, selectedAxis part
   data={plotData}
   visualization={this.props.visualization}
   selectedAxis={this.props.selectedAxis}
  />               

HTML page content

I am new to react.js and Javascript. My job is to add a download button above the image, once click, the SVG format image will be downloaded. I have one method works, I wrote download function into the image generation file, and call the function. But as long as I need to add more buttons, I found the image svg file is inside the html page. Why I can not directly save svg content into a file. For example: the button download content is in the On my react.js code, the RankedBarchart render is what I want. Is there some way I can directly get the content, or content for download.

 <h2>
   BMC values: sorted by {chartName}{' '}
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <button onClick={plot_download_form} class="btn btn-primary">
      Export plot
   </button>
 </h2>
 <RankedBarchart
   // the visualization function not affect the plot
   // the selectedAxis is the main function to show tables,
   // check the RankedBarchart file, selectedAxis part
   data={plotData}
   visualization={this.props.visualization}
   selectedAxis={this.props.selectedAxis}
  />               

HTML page content

• javascript
• html
• reactjs

1 Answer 1

If your SVG is inside the DOM, you can use a ref or something like document.querySelector to get access to the DOM element. You need to get a reference to the wrapper element and access wrapperElement.innerHTML. Afterwards, wrap it in a blob and create a download link.

function downloadBlob(blob, filename) {
  const objectUrl = URL.createObjectURL(blob);

  const link = document.createElement("a");
  link.href = objectUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  setTimeout(() => URL.revokeObjectURL(objectUrl), 5000);
}

export function MyComponent() {
  const svgRef = useRef();

  const downloadSVG = useCallback(() => {
    const svg = svgRef.current.innerHTML;
    const blob = new Blob([svg], { type: "image/svg+xml" });
    downloadBlob(blob, `myimage.svg`);
  }, []);

  return (
    <div className="App">

      <div ref={svgRef}>
        <svg>
          {/* svg or react ponent generating svg */}
        </svg>
      </div>

      <div>
        <button onClick={downloadSVG}>Download</button>
      </div>
    </div>
  );
}

I made a codesandbox example: https://codesandbox.io/s/svg-dom-download-example-mmnd1?file=/src/App.js