excel浏览添加下载

src/components/PreviewExcel/index.vue

 <template>
   <div id="preview-excel"></div>
+
+  <el-button class="download-file" @click.stop="downloadFile" size="large" circle type="primary">
+    <el-icon><Download /></el-icon>
+  </el-button>
 </template>
 
 <script lang="ts" setup>
+import { Download } from '@element-plus/icons-vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import LuckyExcel from 'luckyexcel'
 import { getOrderFileById } from '@/api/order'
@@ -15,6 +20,7 @@ import {
 import { useRoute } from 'vue-router'
 import { isFunction } from '@/utils/is'
 
+const filePath = ref('')
 const props = defineProps(['fileId'])
 const luckysheet = (window as any).luckysheet
 const loading = ref(false)
@@ -22,6 +28,8 @@ const route = useRoute()
 
 /**生成excel */
 const generateExcel = (path: string) => {
+  // 保存浏览文件的地址
+  filePath.value = path
   LuckyExcel.transformExcelToLuckyByUrl(
     '/api/sys/static/' + path,
     new Date().getTime() + '.xlsx',
@@ -43,6 +51,10 @@ const generateExcel = (path: string) => {
   )
 }
 
+const downloadFile = () => {
+  window.open('/api/sys/static/' + filePath.value, '_blank')
+}
+
 /**获取文件路径 */
 const getFilePath = async () => {
   try {
@@ -71,10 +83,6 @@ watch(
 )
 
 onMounted(() => {
-  // luckysheet.create({
-  //   container: 'preview-excel'
-  // })
-
   getFilePath()
 })
 onUnmounted(() => {
@@ -86,4 +94,10 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
+.download-file {
+  position: fixed;
+  bottom: 30px;
+  right: 20px;
+  z-index: 3000;
+}
 </style>