Download via href?

qmk · Oct 14, 2024 · d3cc065 · d3cc065
1 parent f88f676
commit d3cc065
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -13,15 +13,13 @@
     "@guolao/vue-monaco-editor": "^1.5.4",
     "@mdi/font": "7.4.47",
     "@vueuse/core": "^11.1.0",
-    "file-saver": "^2.0.5",
     "roboto-fontface": "*",
     "vue": "^3.4.37",
     "vuetify": "^3.6.11"
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",
     "@fortawesome/fontawesome-free": "^6.6.0",
-    "@types/file-saver": "^2.0.7",
     "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-typescript": "^13.0.0",

diff --git a/src/components/Compile.vue b/src/components/Compile.vue
@@ -6,7 +6,7 @@
     persistent
     @after-enter="submitJob"
   >
-    <v-card
+  <v-card
       max-width="400"
       title="Compiling..."
     >
@@ -15,41 +15,50 @@
         <div class="d-flex justify-center">
           <v-progress-circular :size="64" :width="6" class="ma-6" indeterminate/>
         </div>
-        <!-- <p v-if=jobID class="text-md-center">JobID: {{ jobID }}</p> -->
       </template>
+
       <template #actions>
         <v-btn class="ms-auto" text="Abort" @click="abort"/>
+        <a class="d-none" ref="download" :download="firmwareName" :href="firmwareURL"/>
       </template>
     </v-card>
   </v-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed, useTemplateRef } from 'vue'
 import { useFetch, useIntervalFn } from '@vueuse/core'
 import { useKeymapState } from '@/composables/useKeymapState'
-import { saveAs } from 'file-saver';
 
-const { keymap } = useKeymapState()
+const { keymap } = useKeymapState();
 
 const dialog = ref(false);
-const jobID = ref('')
+const downloadBtn = useTemplateRef('download');
+
+const jobID = ref('');
+const firmwareName = ref('');
+
+const firmwareURL = computed(() => {
+    return `https://api.qmk.fm/v1/compile/${jobID.value}/download`;
+})
 
 const { pause, resume } = useIntervalFn(async () => {
-    const { data } = await useFetch(`https://api.qmk.fm/v1/compile/${jobID.value}`).get().json()
+    const { data } = await useFetch(`https://api.qmk.fm/v1/compile/${jobID.value}`).get().json();
 
     if(data.value.status === 'finished') {
-        abort();
+      firmwareName.value = data.value.result.firmware_filename;
 
-        saveAs(`https://api.qmk.fm/v1/compile/${jobID.value}/download`, data.value.result.firmware_filename);
+      setTimeout(() => {
+        download();
+      });
     }
 }, 2500, {immediate: false})
 
 const submitJob = async () => {
-    const { data } = await useFetch('https://api.qmk.fm/v1/compile').post(keymap.value).json()
+    const { data } = await useFetch('https://api.qmk.fm/v1/compile').post(keymap.value).json();
 
     if (!data.value.enqueued) {
-        console.log("error?")
+        console.log("error?");
         return;
     }
 
@@ -62,4 +71,10 @@ const abort = () => {
     dialog.value = false;
 }
 
+const download = () => {
+    abort();
+
+    downloadBtn.value?.click();
+}
+
 </script>