Using file-saver package for better cross-browser support.

package.json

@@ -3,9 +3,11 @@
   "version": "1.0.0",
   "main": "src/index.tsx",
   "dependencies": {
+    "canvas-toBlob": "^1.0.0",
     "canvg": "^1.5.3",
     "d3": "^5.7.0",
     "detect-browser": "^4.1.0",
+    "file-saver": "^2.0.1",
     "history": "^4.7.2",
     "md5": "^2.2.1",
     "query-string": "^5.1.1",
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "@types/d3": "^5.5.0",
+    "@types/file-saver": "^2.0.0",
     "@types/history": "^4.7.2",
     "@types/jest": "*",
     "@types/md5": "^2.1.33",

src/chart.tsx

@@ -2,6 +2,7 @@ import * as d3 from 'd3';
 import * as React from 'react';
 import canvg from 'canvg';
 import {intlShape} from 'react-intl';
+import {saveAs} from 'file-saver';
 import {
   JsonGedcomData,
   ChartHandle,
@@ -162,13 +163,8 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
   }
 
   downloadSvg() {
-    const hiddenElement = document.createElement('a');
-    hiddenElement.href = URL.createObjectURL(
-      new Blob([this.getSvgContents()], {type: 'image/svg+xml'}),
-    );
-    hiddenElement.target = '_blank';
-    hiddenElement.download = 'topola.svg';
-    hiddenElement.click();
+    const blob = new Blob([this.getSvgContents()], {type: 'image/svg+xml'});
+    saveAs(blob, 'topola.svg');
   }
 
   downloadPng() {
@@ -193,11 +189,9 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
       scaleHeight: canvas.height,
     });
     const onBlob = (blob: Blob | null) => {
-      const hiddenElement = document.createElement('a');
-      hiddenElement.href = URL.createObjectURL(blob);
-      hiddenElement.target = '_blank';
-      hiddenElement.download = 'topola.png';
-      hiddenElement.click();
+      if (blob) {
+        saveAs(blob, 'topola.png');
+      }
     };
     canvas.toBlob(onBlob, 'image/png');
   }

src/index.tsx

@@ -10,6 +10,7 @@ import {HashRouter as Router, Route} from 'react-router-dom';
 import {IntlProvider} from 'react-intl';
 import './index.css';
 import 'semantic-ui-css/semantic.min.css';
+import 'canvas-toBlob';
 
 addLocaleData([...locale_en, ...locale_pl]);