Skip to content

The Download Button

Julian Müller edited this page Jan 13, 2023 · 1 revision

We have created a generic Download Button component that you can add to any component you create and which allows the user to download the current plot as an SVG file. To add this button to your component first import it like this:

import '../../../download-button/dist/src/download-button.js';

Then change the return statement of your render() function like this (replace scatterplot by the id of your component):

return html` <div style="display: flex">
  <div id="scatterplot"></div>
  <download-button
    .svgComponent="${this}"
    style="margin-left: 20px;"
  ></download-button>
</div>`;

Finally, add an exportSVG() method:

public exportSvg() {
  return this.shadowRoot?.querySelector('svg')?.outerHTML;
}

That should be enough. As always, check out the BiowcScatter component as a reference.

Clone this wiki locally