엑셀다운로드 기능 추가

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "file-saver": "^2.0.5",
         "vue": "^2.6.11",
         "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
@@ -6809,6 +6810,11 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -21169,6 +21175,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "file-saver": "^2.0.5",
     "vue": "^2.6.11",
     "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",

src/api/can.js

@@ -31,4 +31,17 @@ async function getCouponNumberList(couponId, page) {
     return Vue.axios.get('/can/coupon/number-list?couponId=' + couponId + '&page=' + (page - 1) + "&size=20");
 }
 
-export {getCans, insertCan, deleteCan, paymentCan, getCouponList, generateCoupon, getCouponNumberList}
+async function downloadCouponNumberList(couponId) {
+    return Vue.axios.get('/can/coupon/number-list/download?couponId=' + couponId, { responseType: 'blob' });
+}
+
+export {
+    getCans,
+    insertCan,
+    deleteCan,
+    paymentCan,
+    getCouponList,
+    generateCoupon,
+    getCouponNumberList,
+    downloadCouponNumberList
+}

src/views/Can/CanCoupon.vue

@@ -33,14 +33,13 @@
             item-key="id"
             class="elevation-1"
             hide-default-footer
-            @click:row="getCouponNumberList"
           >
             <template v-slot:item.id="{ item }">
               {{ item.id }}
             </template>
 
             <template v-slot:item.couponName="{ item }">
-              {{ item.couponName }}
+              <span @click="getCouponNumberList(item)">{{ item.couponName }}</span>
             </template>
 
             <template v-slot:item.can="{ item }">
@@ -76,6 +75,14 @@
                 X
               </div>
             </template>
+            <template v-slot:item.download="{ item }">
+              <v-btn
+                :disabled="is_loading"
+                @click="downloadCouponNumberList(item)"
+              >
+                다운로드
+              </v-btn>
+            </template>
           </v-data-table>
         </v-col>
       </v-row>
@@ -245,6 +252,8 @@
 
 <script>
 import * as api from '@/api/can'
+import { saveAs } from 'file-saver';
+
 import datetime from "vuejs-datetimepicker";
 
 export default {
@@ -528,6 +537,26 @@ export default {
 
       this.is_loading = false
     },
+
+    async downloadCouponNumberList(item) {
+      this.is_loading = true
+
+      try {
+        const response = await api.downloadCouponNumberList(item.id)
+        // Create a Blob from the PDF Stream
+        const file = new Blob(
+          [response.data],
+          { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
+        );
+
+        // Use FileSaver to save the file
+        saveAs(file, '쿠폰번호리스트.xlsx');
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('다운로드를 하지 못했습니다.\n다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    }
   }
 }
 </script>