修改 xls文件无法预览问题

This commit is contained in:
GGJ
2024-10-15 10:39:28 +08:00
parent 7062305c01
commit 9404412823
7 changed files with 37 additions and 15 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,7 +1,16 @@
<template> <template>
<div class="default-main"> <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> <template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button> <el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
</template> </template>
@@ -104,7 +113,7 @@ const tableStore = new TableStore({
], ],
loadCallback: () => { } loadCallback: () => { }
}) })
tableStore.table.params.searchValue=''
// 弹框 // 弹框
const addUser = () => { const addUser = () => {
popupEditRef.value.open('新增模版') popupEditRef.value.open('新增模版')

View File

@@ -14,7 +14,7 @@
@init="handleNodeClick" @init="handleNodeClick"
></PointTree> ></PointTree>
</pane> </pane>
<pane> <pane>
<div style="position: relative; height: 100%"> <div style="position: relative; height: 100%">
<el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%"> <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
<!-- <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload"> <!-- <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">