refactor(file): replace window.open with blob download pattern

Co-authored-by: Copilot <copilot@github.com>

src/modules/10_registry/05_Other/02_File.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
-import { is, useQuasar } from "quasar";
-import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { ref, onMounted, watch } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,14 +18,15 @@ const fileList = ref<FileFormType[]>([]);
 
 /** ฟังก์ชันดึงข้อมูลไฟล์ */
 async function getData() {
+  if (!store.profileId) return;
   isLoading.value = true;
   await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐาน",
-        store.profileId
-      )
+        store.profileId,
+      ),
     )
     .then((res) => {
       const data = res.data;
@@ -51,12 +52,23 @@ async function downloadFile(fileName: string) {
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐาน",
         store.profileId,
-        fileName
-      )
+        fileName,
+      ),
     )
-    .then((res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+    .then(async (res) => {
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((e) => {
       messageError($q, e);
@@ -69,6 +81,15 @@ async function downloadFile(fileName: string) {
 onMounted(() => {
   getData();
 });
+
+watch(
+  () => store.profileId,
+  (newVal) => {
+    if (newVal) {
+      getData();
+    }
+  },
+);
 </script>
 
 <template>

src/modules/10_registry/05_Other/03_FileOther.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -18,14 +18,15 @@ const fileList = ref<FileFormType[]>([]);
 
 /** ฟังก์ชันดึงข้อมูลไฟล์ */
 async function getData() {
+  if (!store.citizenId) return;
   isLoading.value = true;
   await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐานเพิ่มเติม",
-        store.citizenId
-      )
+        store.citizenId,
+      ),
     )
     .then((res) => {
       const data = res.data;
@@ -51,12 +52,23 @@ async function downloadFile(fileName: string) {
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐานเพิ่มเติม",
         store.citizenId,
-        fileName
-      )
+        fileName,
+      ),
     )
-    .then((res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+    .then(async (res) => {
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((e) => {
       messageError($q, e);
@@ -69,6 +81,15 @@ async function downloadFile(fileName: string) {
 onMounted(() => {
   getData();
 });
+
+watch(
+  () => store.citizenId,
+  (newVal) => {
+    if (newVal) {
+      getData();
+    }
+  },
+);
 </script>
 
 <template>