Merge pull request 'fix : 修复文章下载文件名问题' (#889) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/889

src/components/Tinymce.vue

@@ -121,12 +121,6 @@ const init = reactive({
     // }),
   },
   file_picker_callback: (callback, value, meta) => {
-    console.info("🚀 ~method:uploadFile -----")
-    let loading= ElLoading.service({
-      lock: true,
-      text: '文件上传中...',
-      background: 'rgba(0, 0, 0, 0.7)',
-    })
     // 使用案例http://tinymce.ax-z.cn/general/upload-images.php
     // meta.filetype  //根据这个判断点击的是什么file image media
     let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
@@ -151,7 +145,11 @@ const init = reactive({
       xhr.setRequestHeader(
         'Authorization',getToken()
       )
-
+      let loading= ElLoading.service({
+        lock: true,
+        text: '文件上传中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
       xhr.onload = function() {
         let res;
         // if (xhr.status != 200) {
@@ -166,7 +164,8 @@ const init = reactive({
           })
         loading.close()
         const fileUrl = res.data.url;
-        callback(fileUrl, { title: file.name });
+        // '?fileId='+res.data.id+
+        callback(fileUrl+'?fileName='+res.data.originalFilename, {title: file.name });
       };
       formData = new FormData();
       formData.append('file', file, file.name );

src/views/article-management/detail.vue

@@ -10,7 +10,7 @@
       <el-row gutter="20">
         <el-col :span="24">
           <el-form-item>
-            <div class="article-a" v-html="formData.articleContent"></div>
+            <div class="article-a" v-html="formData.articleContent" @click="clickHandle"></div>
           </el-form-item>
         </el-col>
       </el-row>
@@ -19,12 +19,64 @@
 </template>
 
 <script setup>
-import {ElNotification} from "element-plus";
+import {ElLoading, ElNotification} from "element-plus";
 import {getArticleDetail} from "@/api/article";
+import {downloadFile} from "@/api/project-demand";
 
 const loading = ref(false)
 const formData = ref({})
 const route = useRoute()
+const clickHandle = (e) => {
+  e.preventDefault()
+  if (e.target.nodeName == "A") {
+    let url = e.target.href.split('?')[0];
+    const searchParams = new URLSearchParams(e.target.href.split('?')[1])
+    const fileId = searchParams.get('fileId');
+    const fileName = searchParams.get('fileName');
+    // if(localStorage.getItem("fileUrlList")){
+    // let fileUrlList=JSON.parse(localStorage.getItem("fileUrlList"));
+    // fileUrlList.forEach(item=>{
+    //   if(item.url == e.target.href){
+    //     console.info("🚀 ~method:item -----", item)
+    let item = {
+      url,
+      fileName
+    }
+        // handleDownload(fileId,fileName)
+    download(item)
+    // }else {
+    // e.preventDefault()
+    // }
+    // })
+    // }
+  }
+}
+// const handleDownload = (fileId,fileName) => {
+//   const loading = ElLoading.service({fullscreen: true})
+//   downloadFile(fileId).then(res => {
+//     const blob = new Blob([res])
+//     let a = document.createElement('a')
+//     a.href = URL.createObjectURL(blob)
+//     nextTick(() => {
+//       a.download = fileName
+//       a.click()
+//       loading.close()
+//     })
+//   })
+// }
+const download = (row) => {
+  const x = new window.XMLHttpRequest();
+  x.open('GET', row.url, true);
+  x.responseType = 'blob';
+  x.onload = () => {
+    const url = window.URL.createObjectURL(x.response);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = row.fileName;
+    a.click();
+  };
+  x.send();
+}
 const getDetailInfo = async () => {
   loading.value = true
   getArticleDetail(route.query.id).then(res => {
@@ -49,9 +101,11 @@ onMounted(async () => {
 
 <style lang="scss">
 .article-a {
-  p {
+  a {
-    a {
+    color: #409eff !important;
-      color: #409eff;
+
+    &:hover {
+      text-decoration: underline !important;
     }
   }
 }