use filesaver

Author: vcoppe

website/package-lock.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/package.json

@@ -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);