diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 12d2374e9..9a9f5bae8 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -29,4 +29,6 @@ export default {
   leaveComanderApprove: (id: string) => `${leave}/admin/approve/comander/${id}`,
   leaveApprove: (id: string) => `${leave}/admin/approve/${id}`,
   leaveReject: (id: string) => `${leave}/admin/reject/${id}`,
+  leaveReport: (id: string) => `${leave}/report/${id}`,
+  leaveReportReject: (id: string) => `${leave}/report/reject/${id}`,
 };
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 55625d3f8..487fae021 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import genReport from "@/plugins/genreport";
 
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
@@ -194,7 +195,9 @@ async function fetchDetailLeave(paramsId: string) {
       formData.leavegovernmentDate =
         data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
       formData.leaveSalary = data.leaveSalary ? data.leaveSalary : "-";
-      formData.leaveSalaryText = data.leaveSalaryText ? data.leaveSalaryText : "-";
+      formData.leaveSalaryText = data.leaveSalaryText
+        ? data.leaveSalaryText
+        : "-";
       formData.leaveTypeDay =
         data.leaveTypeDay && stores.convertLeaveDaytype(data.leaveTypeDay);
       formData.wifeDayName = data.wifeDayName ? data.wifeDayName : "-";
@@ -347,7 +350,7 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
 }
 
 /** Function dialog*/
-const openModal = async (data: string) => {
+async function openModal(data: string) {
   if (data === "approve") {
     modalApprove.value = true;
     dialogTitle.value = "อนุมัติ";
@@ -361,7 +364,7 @@ const openModal = async (data: string) => {
     dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
     dialogLabel.value = "ความคิดเห็น";
   }
-};
+}
 
 /** function ส่งไปผู้บังคับบัญชา*/
 function sendToCommand() {
@@ -458,6 +461,23 @@ function clickSave(reason: string) {
     );
   }
 }
+
+async function onClickDownloadFile(id: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      console.log(res);
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -484,6 +504,7 @@ function clickSave(reason: string) {
           flat
           color="primary"
           class="q-mr-sm"
+          @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
           ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
         >
       </div>
@@ -502,7 +523,7 @@ function clickSave(reason: string) {
           <q-icon name="attach_file" color="primary" />
         </template>
       </q-file> -->
-      <q-btn
+      <!-- <q-btn
         v-if="filesUpload"
         flat
         round
@@ -510,7 +531,7 @@ function clickSave(reason: string) {
         icon="mdi-arrow-up-bold"
         @click="upLoadFile"
         ><q-tooltip>อัปโหลด</q-tooltip></q-btn
-      >
+      > -->
     </div>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
index a4442ed86..b6563d5ae 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -4,13 +4,12 @@ import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import genReport from "@/plugins/genreport";
 
 /** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
-const APIDATA = useLeavelistDataStoreTest();
 
 /** importType */
 import type {
@@ -370,6 +369,23 @@ function clickSave() {
     console.log("NOT");
   }
 }
+
+async function onClickDownloadFile(id: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReportReject(id))
+    .then(async (res) => {
+      console.log(res);
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -387,7 +403,7 @@ function clickSave() {
         />
         รายละเอียดการขอยกเลิกของ {{ formData.fullName }}
       </div>
-      <!-- <div>
+      <div>
         <q-btn
           icon="mdi-download"
           unelevated
@@ -396,9 +412,10 @@ function clickSave() {
           flat
           color="primary"
           class="q-mr-sm"
+          @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
           ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
         >
-      </div> -->
+      </div>
       <q-space />
       <!-- <q-file
         v-model="filesUpload"
diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
new file mode 100644
index 000000000..534694828
--- /dev/null
+++ b/src/plugins/genreport.ts
@@ -0,0 +1,54 @@
+import axios from "axios";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const apiGenReport =
+  "https://report-server.frappet.synology.me/api/v1/report-template/docx";
+
+async function genReport(data: any, fileName: string) {
+  showLoader();
+  await axios
+    .post(apiGenReport, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "content-Type": "application/json",
+      },
+      responseType: "arraybuffer",
+    })
+    .then((res) => {
+      const data = res.data;
+      if (data) {
+        // สร้าง Blob จาก array buffer
+        const blob = new Blob([data], {
+          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        });
+
+        // สร้าง URL สำหรับไฟล์ Blob
+        const url = URL.createObjectURL(blob);
+
+        // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${fileName}.docx`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
+        document.body.appendChild(link);
+        link.click();
+
+        // ลบ URL ที่สร้างขึ้นหลังจากใช้งาน
+        URL.revokeObjectURL(url);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+export default genReport;