From ab63afc56dae53c7d8f7ad1c3c5cb700d79e49d5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 30 Apr 2026 15:04:45 +0700
Subject: [PATCH] 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  | 39 ++++++++++++++-----
 .../10_registry/05_Other/03_FileOther.vue     | 37 ++++++++++++++----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/modules/10_registry/05_Other/02_File.vue b/src/modules/10_registry/05_Other/02_File.vue
index 1e9472e..1be029f 100644
--- a/src/modules/10_registry/05_Other/02_File.vue
+++ b/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>
diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
index 585997b..05e740b 100644
--- a/src/modules/10_registry/05_Other/03_FileOther.vue
+++ b/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>