diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index e135fca2b..4620c4168 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -15,4 +15,5 @@ export default {
   /** รายการอัตราเงินเดือน*/
   salaryRateList: salaryRate,
   salaryRateListByid: (id: string) => `${salaryRate}/${id}`,
+  salaryReportByid:(id:string) => `${salary}/report/${id}`
 };
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 7c18bf5b3..56988af7f 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import genReportXLSX from '@/plugins/genreportxlsx'
 /** importType*/
 import type { QTableProps } from "quasar";
 import type {
@@ -178,6 +178,20 @@ function onClickDelete(id: string) {
   });
 }
 
+ function clickDownload(){
+  showLoader()
+  http
+  .get(config.API.salaryReportByid(salaryId.value))
+  .then((res)=>{
+    const dataList = res.data.result
+    genReportXLSX(dataList,'อัตราเงินเดือน')
+  })
+  .catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    hideLoader()
+  })
+}
 onMounted(async () => {
   await fetchListSalalyRate();
 });
@@ -218,8 +232,8 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             <q-tooltip>เพิ่มอัตราเงินเดือน </q-tooltip>
           </q-btn>
           <q-space />
-          <q-btn outline label="พิมพ์เอกสาร" icon="print" color="green" />
-          <q-btn outline label="ดาว์นโหลด" icon="download" color="blue" />
+          <!-- <q-btn outline label="พิมพ์เอกสาร" icon="print" color="green" /> -->
+          <q-btn outline label="ดาวน์โหลด" icon="download" color="blue" @click="clickDownload()"/>
         </q-toolbar>
       </div>
       <div class="col-12"><q-separator /></div>