重写文件导出下载

.env.development

 VUE_APP_API_URL = 'http://192.168.5.87/api/common/post'
 VUE_APP_UPLOADURLAPI_URL = 'http://192.168.10.214:8120'
 VUE_APP_SHARE_URL = 'http://127.0.0.1:8080'
+VUE_APP_PDF_URL = 'http://127.0.0.1:5164'
 # VUE_APP_API_URL = 'https://reborn.oytour.com/api/common/post'
 # VUE_APP_UPLOADURLAPI_URL = 'https://upload.oytour.com'
 # VUE_APP_SHARE_URL = 'http://vitto.com'
\ No newline at end of file

.env.production

 VUE_APP_API_URL = 'https://reborn.oytour.com/api/common/post'
 VUE_APP_UPLOADURLAPI_URL = 'https://upload.oytour.com'
-VUE_APP_SHARE_URL = 'http://vitto.com'
\ No newline at end of file
+VUE_APP_SHARE_URL = 'http://vitto.com'
+VUE_APP_PDF_URL = 'https://fileservice.oytour.com'
\ No newline at end of file

src/router/router.ts

@@ -74,6 +74,13 @@ const routes: RouteRecordRaw[] = [
       title:'Oops! 出错了'
     }
   },
+  {
+    path: '/download/:token',
+    component: () => import('@/views/SellTemplate/Download.vue'),
+    meta:{
+      title:'下载行程设计'
+    }
+  },
   {
     path: '/notsupported',
     component: () => import('@/views/Mobile/NotSupported.vue'),

src/services/ConfigService.ts

 import Api,{ HttpResponse, Result } from './../utils/request';
 
+export interface DownloadParameter{
+    Id:number,
+    DownloadType:0|1|2,
+    Hash:string,
+    Quality:0.1|0.2|0.3|0.4|0.5|0.6|0.7|0.8|0.9|1
+    Range?:string,
+}
+
 /**
  * 配置相关方法
  */
@@ -219,5 +227,9 @@ class ConfigService{
     static async QueryGiveMeShareDocumentAsync(params : any):Promise<HttpResponse>{
         return Api.Post("triptemplate_GetShareMyFile",params)
     }
+    
+    static async GetTripDownloadTokenAsync(parameter:DownloadParameter):Promise<HttpResponse>{
+        return Api.Post("ppt_get_downloadtoken",parameter)
+    }
 }
 export default ConfigService;
\ No newline at end of file

src/services/FileService.ts

@@ -125,6 +125,15 @@ class FileService {
         return ''
       }
   }
+
+  static checkDownloadRequestAsync = async (token:string) =>{
+    const response = await fetch(`${process.env.VUE_APP_PDF_URL}/api/download/${token}/dw`, {method: 'GET'});
+    if(response.ok){
+      let r = await response.text()
+      return JSON.parse(r)
+    }
+    return null
+  }
 }
 
 export default FileService
\ No newline at end of file

src/utils/common.ts

+import { ApiResult } from '@/configs/axios'
+import ConfigService, { DownloadParameter } from '@/services/ConfigService'
 import { array } from '@amcharts/amcharts4/core'
+import { ElLoading, ElMessage } from 'element-plus'
 import { padStart } from 'lodash'
 
 /**
@@ -16,6 +19,20 @@ export const openNewBlank = (path:string) => {
     window.open(url, '_blank')
   }
 }
+export const downLoadFile = async (parameter:DownloadParameter)=>{
+  const loading = ElLoading.service({
+    lock:true,
+    text:'加载中，请稍等'
+  })
+  const response = await ConfigService.GetTripDownloadTokenAsync(parameter)
+  loading.close()
+  if(response.data.resultCode==ApiResult.SUCCESS){
+    window.open(`${window.location.origin}/download/${response.data.data}`, '_blank')
+  }else{
+    ElMessage.error({message:response.data.message})
+  }
+  
+}
 export const openCustomerService = ()=>{
   const url = 'https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e'
   window.open(url, '_blank')

src/views/Editor/ExportDialog/ExportImage.vue

@@ -64,9 +64,6 @@
       </div>
       <div class="tip" style="color:red" v-if="searchData.sellId==0">当前设计文档没有保存，无法生成图片，请先保存文档。</div>
     </div>
-
-    <a ref="downloadLink" target="_blank" :href="fileUrl" style="display:none" v-if="model==2 && searchData.sellId!=0"></a>
-
     <div class="btns">
       
       <Button class="btn export" type="primary" @click="exportOnlineImage()" v-if="model==2 && searchData.sellId!=0">导出图片</Button>
@@ -93,6 +90,7 @@ import Button from '@/components/Button.vue'
 import RadioButton from '@/components/RadioButton.vue'
 import RadioGroup from '@/components/RadioGroup.vue'
 import { injectKeyTemplate } from '@/types/injectKey'
+import { downLoadFile } from '@/utils/common'
 
 const emit = defineEmits<{
   (event: 'close'): void
@@ -111,8 +109,6 @@ const quality = ref(1)
 const ignoreWebfont = ref(false) //开启在线字体
 
 const autoSave = inject('SellTravelSave') as Ref<number>
-const downloadLink= ref()
-const fileUrl = ref("")
 
 const renderSlides = computed(() => {
   if (rangeType.value === 'all') return slides.value
@@ -143,11 +139,13 @@ const beginDownload = async ()=>{
       rangeArray.push(i)
     }
   }
-  
-  fileUrl.value =  `https://fileservice.oytour.com/api/img/${searchData.value.sellId}/${rangeArray.join(',')}/${format.value=='png'?'png':'jpg'}/${quality.value}/${useSellTemplateStore().SaleHashCode}` //https://fileservice.oytour.com
 
-  nextTick(()=>{
-    downloadLink.value.click()
+  downLoadFile({
+      Id:searchData.value.sellId,
+      Hash:useSellTemplateStore().SaleHashCode,
+      Range:rangeArray.join(','),
+      Quality:quality.value as any,
+      DownloadType:format.value=='png'?2:1
   })
 }
 

src/views/Editor/ExportDialog/ExportPDF.vue

@@ -53,10 +53,7 @@
         提示：若打印预览与实际样式不一致，请在弹出的打印窗口中勾选【背景图形】选项。
       </div>
       <div class="tip" style="color:red" v-if="searchData.sellId==0">当前设计文档没有保存，无法下载PDF，请先保存文档。</div>
-    </div>
-    <a ref="downloadLink" target="_blank" :href="fileUrl" style="display:none" v-if="model==2 &&searchData.sellId!=0"></a>
-    <!-- <a ref="downloadLink" :href="fileUrl" @click.prevent="downloadFile" style="display:none"  v-else></a> -->
-    
+    </div>    
     <div class="btns">
       <Button class="btn export" type="primary" @click="exportOnlinePdf()" v-if="model==2 && searchData.sellId!=0">导出PDF</Button>
       <Button class="btn export" type="primary" @click="expPDF()" v-else>导出PDF</Button>
@@ -72,7 +69,7 @@ import { storeToRefs } from 'pinia'
 import { useSellTemplateStore, useSlidesStore, useScreenStore } from '@/store'
 import { print } from '@/utils/print'
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
-import { query } from '@/utils/common'
+import { downLoadFile, query } from '@/utils/common'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Switch from '@/components/Switch.vue'
@@ -102,8 +99,6 @@ const padding = ref(false)
 
 const autoSave = inject('SellTravelSave') as Ref<number>
 const loadingObj = ref<any>()
-const downloadLink= ref()
-const fileUrl = ref("")
 
 const expPDF = () => {
   if (!pdfThumbnailsRef.value) return
@@ -128,10 +123,13 @@ const formatSliders =()=>{
 const exportOnlinePdf=()=>{
   autoSave.value=1
 }
-const beginDownload = async ()=>{
-  fileUrl.value =  `https://fileservice.oytour.com/api/pdf/${searchData.value.sellId}/${useSellTemplateStore().SaleHashCode}`
-  nextTick(()=>{
-    downloadLink.value.click()
+const beginDownload = ()=>{
+  downLoadFile({
+    Id:searchData.value.sellId,
+    Hash:useSellTemplateStore().SaleHashCode,
+    Range:'',
+    Quality:1,
+    DownloadType:0
   })
 }
 

src/views/SellTemplate/Download.vue

+<template>
+  <div class="window-width window-height column flex-center items-center" style="background-color: #f1f2f4">
+    <div class="rounded bg-white q-pa-xl light-shadow  column flex-center items-center" style="width: 650px;">
+        <div style="width: 100%;">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" style="height: 27px;">
+        </div>
+        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638533817842486720.png" style="width: 300px;" class="q-mt-xl">
+        <template v-if="!isError && !isDownLoading && !isFinish">
+          <div class="row items-center q-mt-xl ">
+              <div style="width: 30px;height: 30px;" v-loading="true"></div>
+              <div class="pingfangr q-ml-xl" style="font-size: 18px;">文件正在准备中...</div>
+          </div>
+          <div class="q-mt-lg text-info text-small text-center" style="font-size: 14px;">新的文件首次准备过程通常需要40秒左右，后续的下载会在3秒左右<br/>请您耐心等待。我们完成文件的渲染后将自动开启下载。</div>
+         
+        </template>
+        <template v-if="isDownLoading">
+          <div class="row items-center q-mt-xl ">
+              <div class="pingfangr q-ml-xl" style="font-size: 18px;">文件正在下载中...</div>
+          </div>
+          <div class="full-width">
+            <el-progress :percentage="progress" :format="formatProgress" class="q-mt-xl" />
+          </div>
+        </template>
+        <template v-if="isFinish">
+          <div class="row items-center q-mt-xl ">
+            <div class="pingfangr q-ml-xl" style="font-size: 18px;">文件下载已完成</div>
+            
+          </div>
+          <div class="q-mt-lg text-info text-small text-center" style="font-size: 14px;">本次下载令牌已失效，请关闭窗口，不要做多次刷新请求</div>
+          <div class="q-mt-xl text-center" style="font-size: 14px;">
+            <el-button type="info" size="large" class="ppt-button text-weight-bold" @click="closeWindow">关闭当前窗口</el-button>
+          </div>
+        </template>
+        <template v-if="isError">
+          <div class="row items-center q-mt-xl ">
+            <div class="pingfangr q-ml-xl" style="font-size: 18px;">Access Denied，无法继续执行</div>
+          </div>
+          <div class="q-mt-lg text-info text-small text-center" style="font-size: 14px;">这通常是由于你没有足够的权限下载此文件，或者是由于你重复使用了令牌进行下载，你需要进入返回个人空间进行重新发起下载请求</div>
+          <div class="q-mt-xl text-center" style="font-size: 14px;">
+            <el-button type="info" size="large" class="ppt-button text-weight-bold" @click="closeWindow">关闭当前窗口</el-button>
+          </div>
+        </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ApiResult } from "@/configs/axios";
+import ConfigService from "@/services/ConfigService";
+import FileService from "@/services/FileService";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+const token = router.currentRoute.value.params.token
+const isError = ref(false)
+const isDownLoading = ref(false)
+const isFinish = ref(false)
+const progress = ref(0)
+
+if(!token) router.push({path:'/notfound'})
+
+const checkDownloadRequestAsync = async()=>{
+  const response = await FileService.checkDownloadRequestAsync(token.toString())//2f5aa48a56835d0518eea926253214f739b4b77c07b8852aa7fa5df93b2380d2
+  if(response && !response.isError){
+    if(response.status==0){
+      setTimeout(() => {
+        checkDownloadRequestAsync()
+      }, 1000);
+    }else {
+      handlePreview()
+    }
+  } else {
+    isError.value=true
+  }
+}
+
+const handlePreview = ()=> {
+  isDownLoading.value=true
+  isFinish.value=false
+  const url = `${process.env.VUE_APP_PDF_URL}/api/download/${token}/d`
+  const xhr = new XMLHttpRequest()
+  xhr.open('GET', url, true)
+  xhr.responseType = 'blob'
+  xhr.onprogress = (e:any)=>{
+      progress.value = (e.loaded / e.total) * 100
+      console.log(e)
+  }
+  xhr.onload = ()=>{
+    isDownLoading.value=false
+    isFinish.value=true
+    var blob = xhr.response;
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    a.href = url;
+    a.download = xhr.getResponseHeader('X-File-Name')?.toString()??"";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+  xhr.send()
+}
+const formatProgress = (percentage:any) => (percentage === 100 ? '完成' : `${percentage}%`)
+const closeWindow = ()=> window.close()
+checkDownloadRequestAsync()
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/SellTemplate/components/journeyAdsList.vue

@@ -119,8 +119,8 @@
                                         </el-dropdown-item>
                                         <el-dropdown-item icon="Delete" @click="editDelete(scope.row,1)">删除</el-dropdown-item>
                                     </template>
-                                    <el-dropdown-item v-if="(datas.loggedder==scope.row.CreateName&&scope.row.FileType&&currentMenu!=-1)||scope.row.IsDownLoad" icon="Download" @click="exportDocument(scope.row)">导出PDF</el-dropdown-item>
-                                    <el-dropdown-item v-if="(datas.loggedder==scope.row.CreateName&&scope.row.FileType&&currentMenu!=-1)||scope.row.IsDownLoad" icon="Download" @click="exportOnlineImage(scope.row)">导出IMG</el-dropdown-item>
+                                    <el-dropdown-item v-if="(datas.loggedder==scope.row.CreateName&&scope.row.FileType&&currentMenu!=-1)||scope.row.IsDownLoad" icon="Download" @click="exportDocument(scope.row,0)">导出PDF</el-dropdown-item>
+                                    <el-dropdown-item v-if="(datas.loggedder==scope.row.CreateName&&scope.row.FileType&&currentMenu!=-1)||scope.row.IsDownLoad" icon="Download" @click="exportDocument(scope.row,2)">导出IMG</el-dropdown-item>
                                     <el-dropdown-item v-if="(datas.loggedder==scope.row.CreateName&&scope.row.FileType&&currentMenu!=-1)||scope.row.IsView" icon="CopyDocument" @click.stop="CopyTo(scope.row)">复制到</el-dropdown-item>
                                     
                             </el-dropdown-menu>
@@ -194,7 +194,7 @@ import { ElMessage,ElTree,ElLoading, ElMessageBox } from 'element-plus';
 import ConfigService from "@/services/ConfigService";
 import FolderService from "@/services/FolderService";
 import { injectKeyTemplate } from "@/types/injectKey";
-import { createPlayLink, createSaleEditorLink, formatDateTimeToRead } from "@/utils/common";
+import { createPlayLink, createSaleEditorLink, downLoadFile, formatDateTimeToRead } from "@/utils/common";
 import { useSellTemplateStore, useScreenStore, useSlidesStore } from "@/store";
 import { isPC, query } from '@/utils/common'
 
@@ -307,16 +307,6 @@ import { useRouter } from 'vue-router';
     const downloadLink= ref()
     const fileUrl = ref("")
 
-    // 导出img
-    const exportOnlineImage=(row: any)=>{
-        let rangeArray:number[] = []
-        rangeArray.push(0)
-        fileUrl.value =  `https://fileservice.oytour.com/api/img/${row.FileId}/${rangeArray.join(',')}/png/1/${row.HashInfo}`
-        nextTick(()=>{
-            downloadLink.value.click()
-        })
-    }
-
     const SynchronousUpdate = async (row: any) => {
         ElMessageBox.confirm(`此操作将更新行程${row.FileName}，是否确定?`, "提示", {
             confirmButtonText: "确定",
@@ -355,10 +345,14 @@ import { useRouter } from 'vue-router';
         
     }
 
-    const exportDocument = (item:any) => {
-        let url = `https://fileservice.oytour.com/api/img/${item.FileId}/1/png/1/${item.HashInfo}`
-        if(item.FileType==1) url = `https://fileservice.oytour.com/api/pdf/${item.FileId}/${item.HashInfo}`
-        window.open(url);
+    const exportDocument = (item:any,type:0|1|2) => {
+        downLoadFile({
+            Id:item.FileId,
+            Hash:item.HashInfo,
+            Range:'0',
+            Quality:1,
+            DownloadType:type
+        })
     }
     const viewTemplate = (row:any) => {
         let param = query()