修改 xls文件无法预览问题

src/components/PreviewFile/index.vue

@@ -1,13 +1,11 @@
 <template>
     <div style="overflow: auto; height: 100vh">
         <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
-        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" />
+        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" :options="excelOptions" />
         <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
         <iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
-        <img
+        <img v-if="url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')"
-            v-if="url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')"
+            :src="url" />
-            :src="url"
-        />
     </div>
 </template>
 <script lang="ts" setup>
@@ -22,8 +20,11 @@ import VueOfficeExcel from '@vue-office/excel'
 import VueOfficePdf from '@vue-office/pdf'
 const { push, options, currentRoute } = useRouter()
 // const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
-const url = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
 
+const url = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
+const excelOptions = ref({
+    xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
+})
 onMounted(() => {
     console.log()
 })

src/utils/router.ts

@@ -8,14 +8,12 @@ import { closeShade } from '@/utils/pageShade'
 import { adminBaseRoute } from '@/router/static'
 import { compact, isEmpty, reverse } from 'lodash-es'
 import { isAdminApp } from '@/utils/common'
-import { log } from 'console'
 
 /**
  * 导航失败有错误消息的路由push
  * @param to — 导航位置，同 router.push
  */
 export const routePush = async (to: RouteLocationRaw) => {
-    console.log("🚀 ~ routePush ~ to:", to)
     try {
         const failure = await router.push(to)
         if (isNavigationFailure(failure, NavigationFailureType.aborted)) {

src/views/pqs/database/case/components/drawer.vue

@@ -16,7 +16,8 @@
                     <!-- <el-empty description="暂无数据" class="custom-empty iframe" /> -->
                     <div :style="`overflow: auto;`" class="iframe">
                         <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
-                        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" />
+                        <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
+                            :options="excelOptions" />
                         <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
                         <iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
                         <img v-if="
@@ -49,12 +50,14 @@ const drawer = ref(false)
 const activeName = ref('2')
 const num = ref(0)
 const url = ref('')
+const excelOptions = ref({})
 const information = adminInfo.roleCode.includes('information_info')
 const open = (row: any) => {
     // console.log('🚀 ~ open ~ row:', row)
     // url.value = row
     drawer.value = true
     url.value = `/api-docx/excelreport` + row
+    excelOptions.value = { xls: row.split('.')[1] == 'xls' ? true : false }
     // getFileNameAndFilePath({ filePath: row }).then(res => {
     //     url.value = res.data.url
     // })

src/views/pqs/database/case/index.vue

@@ -2,6 +2,15 @@
     <div class="default-main">
         <!-- 案例库 -->
         <TableHeader ref="TableHeaderRef" datePicker>
+            <template #select>
+                <el-form-item label="名称">
+                    <el-input v-model="tableStore.table.params.searchValue" clearable
+                        placeholder="请输入搜索名称" />
+                    </el-form-item>
+
+
+            </template>
+
             <template #operation>
                 <el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
                 <el-button icon="el-icon-View" type="primary" @click="checkOutTheCriteria">查看常见治理措施</el-button>
@@ -161,7 +170,7 @@ const tableStore = new TableStore({
     ],
     loadCallback: () => { }
 })
-
+tableStore.table.params.searchValue=''
 // 弹框
 const addUser = () => {
     popupEditRef.value.open('新增案例')
@@ -170,7 +179,7 @@ const addUser = () => {
 provide('tableStore', tableStore)
 onMounted(() => {
     tableStore.index()
-    console.log('🚀 ~ libcaseBeleteyById ~ tableStore:', tableStore)
+    // console.log('🚀 ~ libcaseBeleteyById ~ tableStore:', tableStore)
 })
 const checkOutTheCriteria = () => {
     queryStandardCase().then(res => {

src/views/pqs/database/standard/index.vue

@@ -21,7 +21,7 @@
                     :style="`height: calc(${height.height} - 60px);`" />
                 <div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
                     <vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
-                    <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" />
+                    <vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url" :options="excelOptions"/>
                     <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url"/> -->
                      <iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
                     <img v-if="
@@ -59,6 +59,7 @@ const adminInfo = useAdminInfo()
 defineOptions({
     name: 'database/standard'
 })
+const excelOptions=ref({})
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(20)
 const size = ref(0)
@@ -84,6 +85,7 @@ const handleNodeClick = (data: any, node: any) => {
        
        setTimeout(() => {
          url.value = `/api-docx/excelreport` + data.url
+         excelOptions.value = { xls: data.url.split('.')[1] == 'xls' ? true : false }       
         // getFileNameAndFilePath({ filePath: data.url }).then(res => {
         //     url.value = res.data.url
         // })

src/views/pqs/database/stencil/index.vue

@@ -1,7 +1,16 @@
 <template>
     <div class="default-main">
         <!-- 模版 -->
-        <TableHeader ref="TableHeaderRef" datePicker>
+        <TableHeader ref="TableHeaderRef" >
+            <template #select>
+                <el-form-item label="名称">
+                    <el-input v-model="tableStore.table.params.searchValue" clearable
+                        placeholder="请输入搜索名称" />
+                    </el-form-item>
+
+
+            </template>
+
             <template #operation>
                 <el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
             </template>
@@ -104,7 +113,7 @@ const tableStore = new TableStore({
     ],
     loadCallback: () => { }
 })
-
+tableStore.table.params.searchValue=''
 // 弹框
 const addUser = () => {
     popupEditRef.value.open('新增模版')