下载

src/api/index.ts

@@ -1,9 +1,9 @@
 import * as request from './request'
 
-export const handle = ({url, params, method, config}: { [index: string]: any}) => {
-  const methodLow: string = method.toLowerCase()
+export const handle = (p: { [index: string]: any}) => {
+  const methodLow: string = p.method.toLowerCase()
   // @ts-ignore
-  return request[methodLow]({url, params, config});
+  return request[methodLow](p);
 }
 
 const files = import.meta.globEager("/src/api/module/*.ts")

src/api/module/gateway.ts

@@ -13,10 +13,8 @@ export const noticeMoreInfo = (params: any) => handle({
   method: 'get',
 })
 
-export const noticeMoreInfoDownload = (params: any) => handle({
+export const noticeMoreInfoDownload = (params: any, fileName: string) => handle({
   url: `/${suffix}/gateway/api-tymh/download/notice/attr/${params}`,
-  method: 'get',
-  config: {
-    responseType: 'blob'
-  }
+  method: 'download',
+  fileName
 })

src/api/request.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { ElMessage } from "element-plus";
+import { downloadFile } from '@/utils/util'
 
 const instance = axios.create({
   timeout: 40000
@@ -21,7 +22,7 @@ instance.interceptors.response.use((response: any) => {
       localStorage.removeItem('sc_token')
       location.reload()
     } else {
-      return response.data
+      return response
     }
   }
 }, (error: any) => {
@@ -55,7 +56,7 @@ export const get = ({url, params, config = {}}: { [index: string]: any }) => {
       },
       ...config
     }).then((res: any) => {
-      resolve(res)
+      resolve(res.data)
     }).catch((err) => {
       reject(err);
     })
@@ -71,9 +72,43 @@ export const post = ({url, params, config = {}}: { [index: string]: any }) => {
       },
       ...config
     }).then((res: any) => {
+      resolve(res.data)
+    }).catch((err) => {
+      reject(err);
+    })
+  })
+}
+
+export const download = ({url, params, fileName, config = {}}: { [index: string]: any }) => {
+  return new Promise((resolve, reject) => {
+    let paramUrl = url
+    if (params) {
+      if (typeof params === 'object') {
+        let str = ''
+        Object.entries(params).map(([k, v]: any, i) => {
+          if (i > 0) {
+            str += '&'
+          }
+          str += `${k}=${encodeURIComponent(v)}`
+        })
+        paramUrl += `?${str}`
+      } else {
+        paramUrl += `?${params}`
+      }
+    }
+    instance.get(paramUrl, {
+      headers: {
+        sessionToken: localStorage.getItem('sc_token'),
+        Authorization: localStorage.getItem('sc_token'),
+      },
+      responseType: 'arraybuffer',
+      ...config
+    }).then((res: any) => {
+      downloadFile(res, fileName)
       resolve(res)
     }).catch((err) => {
       reject(err);
     })
   })
 }
+

src/utils/util.ts

@@ -78,15 +78,20 @@ export const copy = (value: string) => {
   console.log(value)
 }
 
-export const download = (fileName: string, data: BlobPart) => {
-  const blob = new Blob([data]);
-  const url = window.URL.createObjectURL(blob);
-  const aLink = document.createElement("a");
-  aLink.style.display = "none";
-  aLink.href = url;
-  aLink.setAttribute("download", fileName);
-  document.body.appendChild(aLink);
-  aLink.click();
-  document.body.removeChild(aLink); // 下载完成移除元素
-  window.URL.revokeObjectURL(url); // 释放掉blob对象
+export const downloadFile = ({ data, headers }: any, fName: string = '') => {
+  let fileName = /.*filename=(.*)/i.exec(headers["content-disposition"])?.[1] || '下载';
+  if (fName) {
+    fileName = `${fName}${fileName.substring(fileName.indexOf('.'), fileName.length)}`
+  }
+  const a = document.createElement("a");
+  a.style.display = "none";
+  const url = (window.URL || window.webkitURL).createObjectURL(
+    new Blob([data], {
+      type: headers["content-type"]
+    })
+  );
+  a.href = url
+  a.download = decodeURIComponent((fileName));
+  a.dispatchEvent(new MouseEvent("click"));
+  (window.URL || window.webkitURL).revokeObjectURL(url);
 }

src/views/screen/message/index.vue

@@ -24,7 +24,7 @@
         <div class="mic-html" v-html="messageInfo.content"/>
       </div>
       <div class="mi-buttons">
-        <div class="__hover download" @click="onMessageDownload" v-if="messageInfo.attachmentName">下载附件</div>
+        <div class="__hover download" @click="onMessageDownload" v-if="messageInfo.attachmentName" v-loading="loadingDownload">下载附件</div>
         <div class="__hover back" @click="onMessageBack">返回</div>
       </div>
     </div>
@@ -46,8 +46,6 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
-import {noticeMoreInfoDownload} from "@/api/module/gateway";
-import {download} from "@/utils/util";
 
 export default defineComponent({
   name: '',
@@ -78,6 +76,7 @@ export default defineComponent({
       currentId: null,
       loadingPage: true,
       loadingInfo: false,
+      loadingDownload: false,
       messageInfo: {},
       showInfo: false
     })
@@ -139,8 +138,11 @@ export default defineComponent({
       state.messageInfo = {}
     }
     const onMessageDownload = () => {
+      state.loadingDownload = true
       that.$api.noticeMoreInfoDownload(state.messageInfo.id).then(res => {
-        that.$util.download(state.messageInfo.attachmentName, res)
+        state.loadingDownload = false
+      }).catch(() => {
+        state.loadingDownload = false
       })
     }
     onMounted(() => {
@@ -327,6 +329,10 @@ export default defineComponent({
       padding: 0 180px;
       overflow-y: auto;
       box-sizing: border-box;
+      font-size: 20px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 32px;
     }
   }
   .mi-buttons {