diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index b1da91002..b7feed1e7 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -11,5 +11,6 @@ export default {
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
 
-  evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`
+  evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`,
+  evaluationFileListbyId:(volume:string,id:string) => `${evaluationFile}/${volume}/${id}`
 };
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
index 275677ccf..17409e3c3 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { reactive, ref, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRouter, useRoute } from "vue-router";
+import axios from "axios";
 
 const router = useRouter();
 const route = useRoute();
@@ -27,16 +29,51 @@ function handleItemClick(itemNumber: number) {
 function getFile(volume: number) {
   const fileText = numToThai(volume);
   showLoader();
-  http.get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
-  .then((res)=>{
-    console.log(res)
-  })
-  .catch((e)=>{
-    messageError($q,e)
-  })
-  .finally(()=>{
-    hideLoader()
-  })
+  http
+    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
+    .then((res) => {
+      const link = res.data.downloadUrl;
+      const type = res.data.fileType;
+      getPDF(link,type);
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getPDF(url: string,type:string) {
+  axios
+    .get(url, {
+      method: "GET",
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
+      },
+    })
+    .then(async (res) => {
+      store.log = 0
+      console.log(res);
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+
+      const pdfData = await usePDF(`${objectUrl}`);
+      showLoader();
+      setTimeout(() => {
+        store.log = 1
+        store.pdfSrcStore = pdfData.pdf.value;
+        store.numOfPagesStore = pdfData.pages.value;
+        hideLoader();
+      }, 1500);
+    }).catch((e)=>{
+      messageError($q,e)
+    })
+    .finally(()=>{
+
+    })
 }
 
 function numToThai(val: number) {
@@ -46,20 +83,20 @@ function numToThai(val: number) {
     case 2:
       return "2-แบบแสดงรายละเอียดการเสนอผลงาน";
     case 3:
-      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูล";
+      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)";
     case 4:
       return "4-แบบประเมินคุณลักษณะบุคคล";
     case 5:
-      return "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก";
+      return "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)";
     case 6:
-      return "6-ผลงานที่จะส่งประเมิน";
+      return "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)";
     default:
       return "1-แบบพิจารณาคุณสมบัติบุคคล";
   }
 }
 
 onMounted(() => {
-  getFile(1)
+  getFile(1);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index fca4bfd6c..959445cbf 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -1,7 +1,22 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+import { useCounterMixin } from "@/stores/mixin";
+import genReport from "@/plugins/genreport";
 
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const fullName = ref<string>(
+  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
+);
 const mesasger = ref<string>("");
 const title = ref<string>("");
 const modalEvaluation = ref<boolean>(false);
@@ -9,35 +24,36 @@ const fileEvaluationUpload = ref<any>();
 const status = ref<string>("WAIT_CHECK_DOC_V1");
 const files = [
   {
-    id: "x1",
+    id: "file1",
     fileName: "แบบพิจารณาคุณสมบัติบุคคล",
-    pathName: "12",
+    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
   },
   {
-    id: "x2",
+    id: "file2",
     fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
-    pathName: "12",
+    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
   },
   {
-    id: "x3",
+    id: "file3",
     fileName:
       "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
-    pathName: "12",
+    pathName:
+      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
   },
   {
-    id: "x4",
+    id: "file4",
     fileName: "แบบประเมินคุณลักษณะบุคคล",
-    pathName: "12",
+    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
   },
   {
-    id: "x5",
+    id: "file5",
     fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-    pathName: "12",
+    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
   },
   {
-    id: "x6",
+    id: "file6",
     fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
-    pathName: "12",
+    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
   },
 ];
 
@@ -46,21 +62,21 @@ async function onClickDowloadFile(
   templateName: string,
   fileName: string
 ) {
-  // showLoader();
-  // const data = Object.assign(
-  //   { fullName: fullName.value },
-  //   tp === "EV1_005" || tp === "EV1_007"
-  //     ? { organizationName: "หน่วยงาน" }
-  //     : null,
-  //   tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
-  //   tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
-  // );
-  // const body = {
-  //   template: tp,
-  //   reportName: templateName,
-  //   data: data,
-  // };
-  // await genReport(body, fileName);
+  showLoader();
+  const data = Object.assign(
+    { fullName: fullName.value },
+    tp === "EV1_005" || tp === "EV1_007"
+      ? { organizationName: "หน่วยงาน" }
+      : null,
+    tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
+    tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
+  );
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: data,
+  };
+  await genReport(body, fileName);
 }
 
 /** ติดต่อผู้ขอประเมิน */
@@ -70,13 +86,64 @@ function openPopUp() {
 }
 
 function downloadFile(name: string) {
-  console.log("11");
+  showLoader();
+  http
+    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
+    .then((res) => {
+      const link = res.data.downloadUrl;
+      const type = res.data.fileType;
+      const fileName = res.data.fileName;
+      getPDF(link, type, fileName);
+    })
+    .catch((e) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getPDF(url: string, type: string, fileName: string) {
+  axios
+    .get(url, {
+      method: "GET",
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
+      },
+    })
+    .then(async (res) => {
+      console.log(res);
+      const a = document.createElement("a");
+      a.href = window.URL.createObjectURL(res.data);
+      a.download = fileName;
+      // a.download = res.data.fileName + `.${mime.getExtension(res.data.fileType)}`
+      a.click();
+    })
+    .catch((e) => {})
+    .finally(() => {});
 }
 
 /** ส่งไปประกาศบนเว็บไซต์ */
-function onWebSite(){
+function onWebSite() {}
 
-}
+// function getFileList() {
+//   showLoader();
+//   http
+//     .get(config.API.evaluationFilebyId("เล่ม 1", id.value))
+//     .then((res) => {
+//       const fileList = res.data;
+//       files.forEach((file, index) => {
+//         const apiFile = fileList[index];
+//         file.pathName = apiFile.pathname;
+//       });
+
+//       console.log(files);
+//     })
+//     .catch((e) => {})
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
 </script>
 
 <template>
@@ -195,10 +262,6 @@ function onWebSite(){
     </div>
   </div>
 
-
-
-
-
   <q-dialog v-model="modalEvaluation" persistent>
     <q-card style="min-width: 60vw">
       <q-toolbar>
@@ -249,11 +312,7 @@ function onWebSite(){
           label="ส่งข้อความ"
         >
         </q-btn>
-
       </div>
-
-
-
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
index 81faa83cb..435e8a627 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
+const store = useEvaluateDetailStore();
 
 const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
@@ -19,6 +23,15 @@ function backPage() {
     page.value--;
   }
 }
+
+watch(()=>store.log, () => {
+  if(store.log === 1){
+    numOfPages.value = store.numOfPagesStore;
+    pdfSrc.value = store.pdfSrcStore;
+    console.log('1',pdfSrc.value)
+    console.log('2',numOfPages.value)
+  }
+});
 </script>
 
 <template>
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index dd3af536f..ee3004ab8 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -63,14 +63,14 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
   function fetchData(data: any[]) {
     console.log(data);
     const dataList: any[] = data.map((data: any) => ({
-      id: data.Id,
-      citizanId: data.CitizenId,
-      fullName: data.FullName,
-      position: data.Position,
-      level: convertType(data.Type),
-      positionNumber: data.PosNo,
-      agency: data.Oc,
-      status: convertStatus(data.Step),
+      id: data.id,
+      citizanId: data.citizenId,
+      fullName: data.fullName,
+      position: data.position,
+      level: convertType(data.type),
+      positionNumber: data.posNo,
+      agency: data.oc,
+      status: convertStatus(data.step),
     }));
     rows.value = dataList;
     console.log(dataList);
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index 44796b05e..60a71ac2b 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -20,6 +20,9 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const tabPanels = ref<string>("1");
 
+  const log = ref<any>(0)
+  const pdfSrcStore = ref<any>()
+  const numOfPagesStore = ref<any>()
   const columnsLicense = ref<QTableProps["columns"]>([
     {
       name: "",
@@ -301,5 +304,8 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnPeriodhistory,
     columnTrainingHistory,
     columnProjectsProposed,
+    pdfSrcStore,
+    numOfPagesStore,
+    log
   };
 });