svg-layout-designer-react/src/Components/Editor/Save.ts

import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { getCircularReplacer } from '../../utils/saveload';
import { ID } from '../SVG/SVG';
import { IEditorState } from '../../Interfaces/IEditorState';
import Worker from '../../workers/worker?worker';

export function SaveEditorAsJSON(
  history: IHistoryState[],
  historyCurrentStep: number,
  configuration: IConfiguration
): void {
  const exportName = 'state.json';
  const spaces = import.meta.env.DEV ? 4 : 0;
  const editorState: IEditorState = {
    history,
    historyCurrentStep,
    configuration
  };

  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
  if (window.Worker) {
    // use webworker for the stringify to avoid freezing
    const myWorker = new Worker();
    myWorker.postMessage({ editorState, spaces });
    myWorker.onmessage = (event) => {
      const data = event.data;
      const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
      createDownloadNode(exportName, dataStr);
      myWorker.terminate();
    };
    return;
  }

  const data = JSON.stringify(editorState, getCircularReplacer(), spaces);
  const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
  createDownloadNode(exportName, dataStr);
}

export function SaveEditorAsSVG(): void {
  const svgWrapper = document.getElementById(ID) as HTMLElement;
  const svg = svgWrapper.querySelector('svg') as SVGSVGElement;
  const preface = '<?xml version="1.0" standalone="no"?>\r\n';
  const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
  const svgUrl = URL.createObjectURL(svgBlob);
  createDownloadNode('state.svg', svgUrl);
}

function createDownloadNode(filename: string, datastring: string) {
  const downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.href = datastring;
  downloadAnchorNode.download = filename;
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();
}