⚡ 提升excel导出功能的用户体验

src/api/common.js

@@ -0,0 +1,13 @@
+import request from "@/router/axios";
+
+/**
+ * 文件流返回
+ * @param url 接口地址
+ */
+export const exportBlob = (url) => {
+  return request({
+    url: url,
+    method: 'get',
+    responseType: 'blob'
+  })
+}

src/util/date.js

@@ -49,3 +49,10 @@ export function dateFormat(date, format) {
   return '';
 
 }
+
+/**
+ * 当前时间戳
+ */
+export function dateNow() {
+  return dateFormat(new Date(), "yyyyMMddhhmmss");
+}

src/util/util.js

@@ -365,3 +365,27 @@ export const downloadFileBase64 = (path, name) => {
     }
   };
 }
+
+/**
+ * 下载excel
+ * @param {blob} fileArrayBuffer 文件流
+ * @param {String} filename 文件名称
+ */
+export const downloadXls = (fileArrayBuffer, filename) => {
+  let data = new Blob([fileArrayBuffer], {type: 'application/vnd.ms-excel,charset=utf-8'});
+  if (typeof window.chrome !== 'undefined') {
+    // Chrome
+    var link = document.createElement('a');
+    link.href = window.URL.createObjectURL(data);
+    link.download = filename;
+    link.click();
+  } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
+    // IE
+    var blob = new Blob([data], {type: 'application/force-download'});
+    window.navigator.msSaveBlob(blob, filename);
+  } else {
+    // Firefox
+    var file = new File([data], filename, {type: 'application/force-download'});
+    window.open(URL.createObjectURL(file));
+  }
+}

src/views/base/region.vue

@@ -52,9 +52,14 @@
 
 <script>
   import {getLazyTree, getDetail, submit, remove} from "@/api/base/region";
+  import {exportBlob} from "@/api/common";
   import {mapGetters} from "vuex";
   import {validatenull} from "@/util/validate";
+  import {downloadXls} from "@/util/util";
+  import {dateNow} from "@/util/date";
   import {getToken} from "@/util/auth";
+  import NProgress from 'nprogress';
+  import 'nprogress/nprogress.css';
 
   export default {
     data() {
@@ -392,11 +397,17 @@
           cancelButtonText: "取消",
           type: "warning"
         }).then(() => {
-          window.open(`/api/blade-system/region/export-region?${this.website.tokenHeader}=${getToken()}`);
+          NProgress.start();
+          exportBlob(`/api/blade-system/region/export-region?${this.website.tokenHeader}=${getToken()}`).then(res => {
+            downloadXls(res.data, `行政区划数据${dateNow()}.xlsx`);
+            NProgress.done();
+          })
         });
       },
       handleTemplate() {
-        window.open(`/api/blade-system/region/export-template?${this.website.tokenHeader}=${getToken()}`);
+        exportBlob(`/api/blade-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
+          downloadXls(res.data, "行政区划模板.xlsx");
+        })
       },
     }
   };

src/views/system/user.vue

@@ -166,23 +166,28 @@
 </template>
 
 <script>
-import {
-  getList,
-  getUser,
-  getUserPlatform,
-  remove,
-  update,
-  updatePlatform,
-  add,
-  grant,
-  resetPassword, unlock
-} from "@/api/system/user";
+  import {
+    getList,
+    getUser,
+    getUserPlatform,
+    remove,
+    update,
+    updatePlatform,
+    add,
+    grant,
+    resetPassword, unlock
+  } from "@/api/system/user";
+  import {exportBlob} from "@/api/common";
   import {getDeptTree, getDeptLazyTree} from "@/api/system/dept";
   import {getRoleTree} from "@/api/system/role";
   import {getPostList} from "@/api/system/post";
   import {mapGetters} from "vuex";
   import website from '@/config/website';
   import {getToken} from '@/util/auth';
+  import {downloadXls} from "@/util/util";
+  import {dateNow} from "@/util/date";
+  import NProgress from 'nprogress';
+  import 'nprogress/nprogress.css';
 
   export default {
     data() {
@@ -902,11 +907,17 @@ import {
           cancelButtonText: "取消",
           type: "warning"
         }).then(() => {
-          window.open(`/api/blade-user/export-user?${this.website.tokenHeader}=${getToken()}&account=${this.search.account}&realName=${this.search.realName}`);
+          NProgress.start();
+          exportBlob(`/api/blade-user/export-user?${this.website.tokenHeader}=${getToken()}&account=${this.search.account}&realName=${this.search.realName}`).then(res => {
+            downloadXls(res.data, `用户数据表${dateNow()}.xlsx`);
+            NProgress.done();
+          })
         });
       },
       handleTemplate() {
-        window.open(`/api/blade-user/export-template?${this.website.tokenHeader}=${getToken()}`);
+        exportBlob(`/api/blade-user/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
+          downloadXls(res.data, "用户数据模板.xlsx");
+        })
       },
       beforeOpen(done, type) {
         if (["edit", "view"].includes(type)) {