From 63f3d63518130b50dc527d23122cbdb4f68de6bb Mon Sep 17 00:00:00 2001 From: vcoppe Date: Fri, 24 Jan 2025 20:42:45 +0100 Subject: [PATCH] use filesaver --- website/package-lock.json | 15 ++++++++++++ website/package.json | 2 ++ website/src/lib/stores.ts | 49 +++++++++++++++------------------------ 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index ef3543aa..ddf59c41 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -19,6 +19,7 @@ "chartjs-plugin-zoom": "^2.0.1", "clsx": "^2.1.1", "dexie": "^4.0.8", + "file-saver": "^2.0.5", "gpx": "file:../gpx", "immer": "^10.1.1", "jszip": "^3.10.1", @@ -43,6 +44,7 @@ "@sveltejs/vite-plugin-svelte": "^3.1.2", "@types/eslint": "^8.56.12", "@types/events": "^3.0.3", + "@types/file-saver": "^2.0.7", "@types/mapbox__mapbox-gl-geocoder": "^5.0.0", "@types/mapbox__tilebelt": "^1.0.4", "@types/mapbox-gl": "^3.4.0", @@ -2210,6 +2212,13 @@ "integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==", "dev": true }, + "node_modules/@types/file-saver": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz", + "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/geojson": { "version": "7946.0.15", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz", @@ -4508,6 +4517,12 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==", + "license": "MIT" + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", diff --git a/website/package.json b/website/package.json index d8903dfa..92bad488 100644 --- a/website/package.json +++ b/website/package.json @@ -20,6 +20,7 @@ "@sveltejs/vite-plugin-svelte": "^3.1.2", "@types/eslint": "^8.56.12", "@types/events": "^3.0.3", + "@types/file-saver": "^2.0.7", "@types/mapbox__mapbox-gl-geocoder": "^5.0.0", "@types/mapbox__tilebelt": "^1.0.4", "@types/mapbox-gl": "^3.4.0", @@ -61,6 +62,7 @@ "chartjs-plugin-zoom": "^2.0.1", "clsx": "^2.1.1", "dexie": "^4.0.8", + "file-saver": "^2.0.5", "gpx": "file:../gpx", "immer": "^10.1.1", "jszip": "^3.10.1", diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts index bfd03494..9f052bb6 100644 --- a/website/src/lib/stores.ts +++ b/website/src/lib/stores.ts @@ -23,6 +23,7 @@ import { } from '$lib/components/file-list/FileList'; import type { RoutingControls } from '$lib/components/toolbar/tools/routing/RoutingControls'; import { SplitType } from '$lib/components/toolbar/tools/scissors/Scissors.svelte'; +import FileSaver from 'file-saver'; import JSZip from 'jszip'; const { fileOrder } = settings; @@ -407,28 +408,6 @@ export function updateSelectionFromKey(down: boolean, shift: boolean) { } } -async function exportFilesAsZip(fileIds: string[], exclude: string[]) { - const zip = new JSZip(); - for (const fileId of fileIds) { - const file = getFile(fileId); - if (file) { - const gpx = buildGPX(file, exclude); - zip.file(file.metadata.name + '.gpx', gpx); - } - } - if (Object.keys(zip.files).length > 0) { - const content = await zip.generateAsync({ type: 'blob' }); - const link = document.createElement('a'); - link.href = URL.createObjectURL(content); - link.download = 'gpx-export.zip'; - link.style.display = 'none'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - URL.revokeObjectURL(link.href); - } -} - async function exportFiles(fileIds: string[], exclude: string[]) { if (fileIds.length > 1) { await exportFilesAsZip(fileIds, exclude) @@ -455,14 +434,24 @@ export async function exportAllFiles(exclude: string[]) { await exportFiles(get(fileOrder), exclude); } -export function exportFile(file: GPXFile, exclude: string[]) { - let blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' }); - let url = URL.createObjectURL(blob); - let a = document.createElement('a'); - a.href = url; - a.download = file.metadata.name + '.gpx'; - a.click(); - URL.revokeObjectURL(url); +function exportFile(file: GPXFile, exclude: string[]) { + const blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' }); + FileSaver.saveAs(blob, `${file.metadata.name}.gpx`); +} + +async function exportFilesAsZip(fileIds: string[], exclude: string[]) { + const zip = new JSZip(); + for (const fileId of fileIds) { + const file = getFile(fileId); + if (file) { + const gpx = buildGPX(file, exclude); + zip.file(file.metadata.name + '.gpx', gpx); + } + } + if (Object.keys(zip.files).length > 0) { + const blob = await zip.generateAsync({ type: 'blob' }); + FileSaver.saveAs(blob, 'gpx-files.zip'); + } } export const allHidden = writable(false);