MessageHistory 상세 작업중

src/main/front/package-lock.json

@@ -18,7 +18,8 @@
         "vite-plugin-mkcert": "^1.17.8",
         "vue": "^3.5.17",
         "vue-chartjs": "^5.3.2",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
@@ -3708,6 +3709,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.20.3",
+      "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+      "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==",
+      "license": "Apache-2.0",
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

src/main/front/package.json

@@ -20,7 +20,8 @@
     "vite-plugin-mkcert": "^1.17.8",
     "vue": "^3.5.17",
     "vue-chartjs": "^5.3.2",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",

src/main/front/src/components/MessageDataView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { defineProps, ref, onMounted, onBeforeUnmount } from 'vue'
 import * as bootstrap from 'bootstrap'
+import * as XSLX from 'xlsx'
 
 const props = defineProps({
   modalId: String,
@@ -54,6 +55,11 @@ function close() {
   }
 }
 
+function excelExport() {
+  let sheet = XSLX.utils.table_to_sheet(document.getElementById(props.modalId + 'Table'))
+  XSLX.writeFile(sheet, props.dto.senderPostmanId + '.xlsx')
+}
+
 defineExpose({
   open,
   close,
@@ -66,13 +72,16 @@ defineExpose({
     <div class="modal-dialog modal-xl">
       <div class="modal-content">
         <div class="modal-header">
-          <h1 class="modal-title fs-5" :id="props.modalId + 'Label'">{{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}</h1>
+          <h1 class="modal-title fs-5" :id="props.modalId + 'Label'">
+            {{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}
+            <button type="button" class="btn btn-success" @click="excelExport">EXCEL</button>
+          </h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <div class="row">
             <div class="col-12">
-              <table class="table table-striped table-bordered align-middle fs-7">
+              <table class="table table-striped table-bordered table-hover table-sm align-middle fs-7" :id="props.modalId + 'Table'">
                 <thead>
                   <tr>
                     <th scope="col" class="text-center" v-if="columnList.length > 0" v-for="columnName in columnList">{{ columnName }}</th>