ThbTech/FileManage
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

新增xls文件预览

Browse Source
This commit is contained in:
wangxk 2025-03-21 17:02:32 +08:00
parent 93e393bf4a
commit bea34cd9b4
3 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/file/file/useFileData.js
View File

@ -176,9 +176,9 @@ export default function useFileData() {
// 如果是文件且格式支持预览, 则进行预览, 格式不支持预览, 则直接进行下载 (ftp 模式不支持预览, 全部是下载)
if (row.type === 'FILE') {
const { batchDownloadFile } = useFileOperator();
// 获取文件类型
let fileType = row.fileType;
// debugger
switch (fileType) {
case 'video': openVideo(); break;
case 'image': openImage(row); break;

6
web/src/views/component/Viewfile.vue
View File

@ -22,7 +22,7 @@
<!-- 预览文件的地方（用于渲染） -->
<div ref="file" :class="{ 'fullscreen-doc': fullscreen }"></div>
</div>
<div v-if="props.type == 'xlsx'" v-loading="loading" element-loading-text="正在加载报告..."
<div v-if="props.type == 'xlsx' || props.type == 'xls' " v-loading="loading" element-loading-text="正在加载报告..."
element-loading-background="rgba(122, 122, 122, 0.8)" class="docWrap">
<div class="tab">
<el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
@ -191,7 +191,7 @@ function init(type) {
loading.value = false;
});
} else if (type == "xlsx") {
} else if (type == "xlsx"|| type == "xls") {
// //表格
loading.value = true;
axios.request({
@ -200,7 +200,7 @@ function init(type) {
responseType: "arraybuffer", //告诉服务器想到的响应格式
headers: {
"Content-Type":
"application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-excel;",
}
}).then((res) => {
if (res) {

24
web/src/views/special/document/index.vue
View File

@ -287,6 +287,7 @@ const fileObj: any = ref({
//上传组件
const upfile = ref(false)
function openFile() {
title.value = "上传文件"
localStorage.setItem('filepath', findPathById(treedata.value, pathid.value));
localStorage.setItem('storageKey', JSON.stringify(['minio']));
upfile.value = true
@ -304,6 +305,7 @@ function openFile() {
//修改文件
const judge = ref(false)
function editfile(row: any, item: any) {
// debugger
upfile.value = true
fileObj.value = JSON.parse(JSON.stringify(row))
if (item) {
@ -581,7 +583,7 @@ const isViewfile = ref(false)
const fileType = ref('')
function openPreview(row: any) {
if (getFileExtension(row.fileName) == 'pdf' || getFileExtension(row.fileName) == 'xlsx' || getFileExtension(row.fileName) == 'docx' || getFileExtension(row.fileName) == 'doc' || getFileExtension(row.fileName) == 'bin') {
if (getFileExtension(row.fileName) == 'pdf' || getFileExtension(row.fileName) == 'xlsx'|| getFileExtension(row.fileName) == 'xls' || getFileExtension(row.fileName) == 'docx' || getFileExtension(row.fileName) == 'doc' || getFileExtension(row.fileName) == 'bin') {
title1.value = row.fileName
ViewfileUrl.value = row.url
isViewfile.value = true
@ -661,9 +663,9 @@ const FILE_ICONS = {
txt: TextImg
};
// 获取文件图标
const fileIcon = (filename: string) => {
const ext = filename.split('.').pop()?.toLowerCase() || 'unknown';
return FILE_ICONS[ext as keyof typeof FILE_ICONS] || require('@/assets/fileimg/text_line.png');
const fileIcon = (row:any) => {
const ext = row.fileName.split('.').pop()?.toLowerCase() || 'unknown';
return FILE_ICONS[ext as keyof typeof FILE_ICONS] || (row.type == 'ZIP' ? ZipImg : TextImg);
};
// 判断是否可预览（基于文件图标映射表）
const shouldPreview = (filename: string): boolean => {
@ -747,19 +749,19 @@ const shouldPreview = (filename: string): boolean => {
<el-table-column prop="fileName" label="预览" width="80" align="center">
<template #default="{ row }">
<div class="preview-icon">
<img :src="fileIcon(row.fileName)" alt="file icon" class="file-icon"
<img :src="fileIcon(row)" alt="file icon" class="file-icon"
@click="shouldPreview(row.fileName) && openPreview(row)">
</div>
</template>
</el-table-column>
<el-table-column prop="uploader" width="80" label="上传人"></el-table-column>
<el-table-column prop="uploadTime" width="170" label="上传时间"></el-table-column>
<el-table-column fixed="right" label="操作" width="100" align="center">
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<span
style="display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between; ">
<img src="@/assets/project/chong.png" alt="" title="重命名" @click="editfile(scope.row, false)"
style="cursor: pointer;">
<!-- <img src="@/assets/project/chong.png" alt="" title="重命名" @click="editfile(scope.row, false)"
style="cursor: pointer;"> -->
<img src="@/assets/MenuIcon/lbcz_xg.png" alt="" @click="editfile(scope.row, true)" title="修改"
style="cursor: pointer;">
<img src="@/assets/MenuIcon/lbcz_sc.png" alt="" @click="delfile(scope.row)" title="删除"
@ -790,7 +792,7 @@ const shouldPreview = (filename: string): boolean => {
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="上传文件" v-model="upfile" width="50%" :before-close="fileClose" top="30px" draggable
<el-dialog :title="title" v-model="upfile" width="50%" :before-close="fileClose" top="30px" draggable
destroy-on-close>
<el-scrollbar :height="!fileObj.id ? '400px' : ''">
<el-form ref="ruleFormRef" style="max-width: 100%" :model="fileObj" :rules="moderqqqules"
@ -800,8 +802,8 @@ const shouldPreview = (filename: string): boolean => {
<el-button @click="openUploadFolderDialog" type="primary">上传文件夹</el-button> -->
<ZUpload />
</el-form-item>
<el-form-item v-else prop="fileName" label="文件名称:">
<el-input v-model="fileObj.fileName" />
<el-form-item v-else prop="fileName" label="文件名称:">
<el-input v-model="fileObj.fileName" disabled />
</el-form-item>
<el-form-item v-if="judge" label="关键字:" prop="taskName">
<el-input v-model="fileObj.keywords" />