修改文件预览

2025-12-25 13:19:24 +08:00
parent 454d612a32
commit 17589e30da
4 changed files with 121 additions and 93 deletions
--- a/src/components/PreviewFile/index.vue
+++ b/src/components/PreviewFile/index.vue
@@ -1,11 +1,19 @@
 <template>
    <div style="overflow: auto; height: 100vh">
        <vue-office-docx v-if="urlKey.includes('.doc') || urlKey.includes('.docx')" :src="url" />
-        <vue-office-excel v-if="urlKey.includes('.xls') || urlKey.includes('.xlsx')" :src="url" :options="excelOptions" />
+        <vue-office-excel
+            v-if="urlKey.includes('.xls') || urlKey.includes('.xlsx')"
+            :src="url"
+            :options="excelOptions"
+        />
        <!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url" /> -->
        <iframe v-if="urlKey.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
-        <img v-if="urlKey.includes('.png') || urlKey.includes('.jpg') || urlKey.includes('.gif') || urlKey.includes('.bmp')"
-            :src="url" />
+        <img
+            v-if="
+                urlKey.includes('.png') || urlKey.includes('.jpg') || urlKey.includes('.gif') || urlKey.includes('.bmp')
+            "
+            :src="url"
+        />
    </div>
 </template>
 <script lang="ts" setup>
@@ -19,7 +27,7 @@ import VueOfficeExcel from '@vue-office/excel'
 //引入VueOfficePdf组件
 import VueOfficePdf from '@vue-office/pdf'
 import { downloadFile } from '@/api/system-boot/file'
-import{previewFile} from '@/utils/fileDownLoad'
+import { previewFile } from '@/utils/fileDownLoad'

 const { push, options, currentRoute } = useRouter()
 const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
@@ -27,15 +35,16 @@ const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
 const url = ref('')
 const excelOptions = ref({})
 const urlKey = currentRoute.value?.href?.split('?')[1]
-if(VITE_FLAG){
-     url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
-     excelOptions.value = ref({
+if (VITE_FLAG) {
+    url.value = '/api-docx/excelreport' + currentRoute.value?.href?.split('?')[1]
+    excelOptions.value = ref({
        xls: currentRoute.value.href?.split('?')[1].split('.')[1] == 'xls' ? true : false
    })
-}else{
-      
-     const previewUrl = await previewFile(currentRoute.value?.href?.split('?')[1])
-     url.value = previewUrl
+} else {
+    setTimeout(async () => {
+        const previewUrl = await previewFile(currentRoute.value?.href?.split('?')[1])
+        url.value = previewUrl
+    }, 0)
 }

 onMounted(() => {
--- a/src/utils/fileDownLoad.ts
+++ b/src/utils/fileDownLoad.ts
@@ -1,38 +1,48 @@
 import { downloadFile } from '@/api/system-boot/file'
 // 下载文件
-export const download = (urls: any) => {
-    console.log('下载',urls)
-    downloadFile({ filePath: urls }).then((res: any) => {
-        let blob = new Blob([res], {
-            type: urls.includes('.pdf')
-                ? 'application/pdf'
-                : urls.includes('.zip')
-                ? 'application/zip'
-                : urls.includes('.doc')
-                ? 'application/msword'
-                : urls.includes('.docx')
-                ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-                : urls.includes('.xls')
-                ? 'application/vnd.ms-excel'
-                : urls.includes('.xlsx')
-                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-                : urls.includes('.png')
-                ? 'image/png'
-                : urls.includes('.jpeg')
-                ? 'image/jpeg'
-                : urls.includes('.jpg')
-                ? 'image/jpg'
-                : ''
+export const download = (urls: string) => {
+    console.log('下载', urls)
+
+    downloadFile({ filePath: urls })
+        .then((res: any) => {
+            // 1. 确定文件MIME类型（优化：用更简洁的方式）
+            const getFileType = (url: string) => {
+                const ext = url.split('.').pop()?.toLowerCase() || ''
+                const mimeMap: Record<string, string> = {
+                    pdf: 'application/pdf',
+                    zip: 'application/zip',
+                    doc: 'application/msword',
+                    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                    xls: 'application/vnd.ms-excel',
+                    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                    png: 'image/png',
+                    jpeg: 'image/jpeg',
+                    jpg: 'image/jpg'
+                }
+                return mimeMap[ext] || ''
+            }
+
+            const blob = new Blob([res], { type: getFileType(urls) })
+
+            // 2. 提取文件名并保留原生后缀（核心修复点）
+            const fileName = urls.split('/').at(-1) || '下载文件' // 先提取URL最后一段（文件名）
+
+            // 3. 创建下载链接
+            const url = window.URL.createObjectURL(blob)
+            const link = document.createElement('a')
+            link.href = url
+            link.download = fileName // 直接使用原文件名（保留后缀）
+            document.body.appendChild(link)
+            link.click()
+
+            // 4. 清理资源（优化）
+            link.remove()
+            window.URL.revokeObjectURL(url) // 释放blob URL
+        })
+        .catch(err => {
+            console.error('下载失败：', err)
+            // 可添加错误提示（如Toast）
        })
-        const url = window.URL.createObjectURL(blob)
-        const link = document.createElement('a')
-        let name = removeLastDotSuffix(urls.split('/')[2])
-        link.href = url
-        link.download = name
-        document.body.appendChild(link)
-        link.click()
-        link.remove()
-    })
 }
 function removeLastDotSuffix(str: string) {
    // 找到最后一个 . 的位置
@@ -41,35 +51,40 @@ function removeLastDotSuffix(str: string) {
    return lastDotIndex !== -1 ? str.slice(0, lastDotIndex) : str
 }

-
 // 预览文件
 export const previewFile = async (urls: any) => {
-    console.log('预览',urls)
+    console.log('预览', urls)
    let url = ''
-    await downloadFile({ filePath: urls }).then((res: any) => {
-        let blob = new Blob([res], {
-            type: urls.includes('.pdf')
-                ? 'application/pdf'
-                : urls.includes('.zip')
-                ? 'application/zip'
-                : urls.includes('.doc')
-                ? 'application/msword'
-                : urls.includes('.docx')
-                ? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-                : urls.includes('.xls')
-                ? 'application/vnd.ms-excel'
-                : urls.includes('.xlsx')
-                ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-                : urls.includes('.png')
-                ? 'image/png'
-                : urls.includes('.jpeg')
-                ? 'image/jpeg'
-                : urls.includes('.jpg')
-                ? 'image/jpg'
-                : ''
+
+    await downloadFile({ filePath: decodeURI(urls) })
+        .then((res: any) => {
+            // 1. 确定文件MIME类型（优化：用更简洁的方式）
+            const getFileType = (url: string) => {
+                const ext = url.split('.').pop()?.toLowerCase() || ''
+                const mimeMap: Record<string, string> = {
+                    pdf: 'application/pdf',
+                    zip: 'application/zip',
+                    doc: 'application/msword',
+                    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                    xls: 'application/vnd.ms-excel',
+                    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+                    png: 'image/png',
+                    jpeg: 'image/jpeg',
+                    jpg: 'image/jpg'
+                }
+                return mimeMap[ext] || ''
+            }
+
+            const blob = new Blob([res], { type: getFileType(decodeURI(urls)) })
+
+
+            // 3. 创建下载链接
+            url = window.URL.createObjectURL(blob)
        })
-        url = window.URL.createObjectURL(blob)
-    })
-    console.log('url',url)
+        .catch(err => {
+            console.error('下载失败：', err)
+            // 可添加错误提示（如Toast）
+        })
+    console.log('url', url)
    return url
 }
--- a/src/views/pqs/database/stencil/index.vue
+++ b/src/views/pqs/database/stencil/index.vue
@@ -59,9 +59,9 @@ const tableStore = new TableStore({
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
-                    disabled: row => {
-                        return !VITE_FLAG
-                    },
+                    // disabled: row => {
+                    //     return !VITE_FLAG
+                    // },
                    click: row => {
                        window.open(window.location.origin + '/#/previewFile?' + row.url)
                    }
--- a/src/views/pqs/supervise/electricalEnergy/components1/form/abnormal.vue
+++ b/src/views/pqs/supervise/electricalEnergy/components1/form/abnormal.vue
@@ -12,7 +12,7 @@
                >
                    <vxe-column type="seq" title="序号" width="60px"></vxe-column>
                    <!-- <vxe-column field="date" title="日期"></vxe-column> -->
-                    <vxe-column field="name" title="统计日期"></vxe-column>
+                    <vxe-column field="date" title="统计日期"></vxe-column>
                    <!-- <vxe-column field="monitorName" title="监测点名称"></vxe-column>
                    <vxe-column field="timeSum" title="异常天数" width="80px">
                        <template v-slot="{ row }">
@@ -25,19 +25,23 @@

            <div style="width: 920px" v-loading="loading1">
                <el-form :inline="true" class="form">
-                    <!-- <el-form-item label="统计日期">
+                    <el-form-item label="统计指标">
                        <el-select
-                            v-model="timeList"
-                            multiple
-                            collapse-tags
+                            v-model="targetKey"
+                            filterable
                            clearable
-                            placeholder="请选择异常天数"
-                            style="width: 200px"
+                            placeholder="请选择指标"
+                            style="width: 150px"
+                            @change="init"
                        >
-                            <el-option v-for="item in dateList" :key="item" :label="item" :value="item" />
+                            <el-option
+                                v-for="item in targetList"
+                                :key="item.key"
+                                :label="item.targetName"
+                                :value="item.key"
+                            />
                        </el-select>
-                    </el-form-item> -->
-
+                    </el-form-item>
                    <el-form-item class="form_but">
                        <span class="mr20">
                            异常时间：
@@ -58,7 +62,6 @@
                        height="auto"
                        :data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
                        v-bind="defaultAttribute"
-                       
                    >
                        <vxe-column type="seq" title="序号" width="80px">
                            <template #default="{ rowIndex }">
@@ -147,6 +150,7 @@ const targetKey = ref('')
 const errCount = ref('')
 const timeSum = ref('')
 const timeList = ref([])
+const targetList = ref([])
 const showColumn = ref(true)
 const open = (data: anyObj, time: string[]) => {
    // title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
@@ -157,18 +161,15 @@ const open = (data: anyObj, time: string[]) => {
    timeList.value = []
    targetKey.value = data.key
    monitorAbnormalTable({
-        monitorIds:[data.lineId],
+        monitorIds:  [data.lineId],
        targetKey: '',
        searchBeginTime: time[0],
        searchEndTime: time[1]
    })
        .then(async res => {
            TableData.value = res.data
-            timeList.value = TableData.value[0]?.dateList.map((item: any) => {
-                return {
-                    name: item
-                }
-            })
+            timeList.value = TableData.value[0]?.dateTargetList
+            targetList.value = timeList.value[0].targetKeys
            await tableRef.value.setCurrentRow(timeList.value[0])
            await currentChangeEvent()
            loading.value = false
@@ -180,7 +181,10 @@ const open = (data: anyObj, time: string[]) => {
 }
 const currentChangeEvent = () => {
    let data = tableRef.value.getCurrentRecord()
-
+    targetList.value = data.targetKeys
+        if (!targetList.value.some(item => item.key == targetKey.value)) {
+        targetKey.value = ''
+    }
    // dateList.value = data.dateList
    //[data.dateList[0]]
    init()
@@ -191,9 +195,9 @@ const init = () => {
    let data = tableRef.value.getCurrentRecord()
    monitorAbnormalTableDetail({
        monitorIds: [TableData.value[0]?.monitorId],
-        time: [data.name],
+        time: [data.date],
        searchBeginTime: TableData.value[0].date,
-        targetKey: ''
+        targetKey: targetKey.value
    })
        .then(res => {
            errCount.value = res.data.errCount
@@ -234,7 +238,7 @@ defineExpose({ open })
    // justify-content: end;
    // position: relative;
    // .form_but {
-      
+
    //     right: -22px;
    // }
 }