forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-08-02 17:11:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Przemek Wiech
2019-03-02 13:31:16 +01:00
parent 33d4f8f885
commit 1dc90e3262
3 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

18
src/chart.tsx
View File

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

1
src/index.tsx
View File

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