use filesaver

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",

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",

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[]) {
+function exportFile(file: GPXFile, exclude: string[]) {
-    let blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' });
+    const blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' });
-    let url = URL.createObjectURL(blob);
+    FileSaver.saveAs(blob, `${file.metadata.name}.gpx`);
-    let a = document.createElement('a');
+}
-    a.href = url;
+
-    a.download = file.metadata.name + '.gpx';
+async function exportFilesAsZip(fileIds: string[], exclude: string[]) {
-    a.click();
+    const zip = new JSZip();
-    URL.revokeObjectURL(url);
+    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);