From c16e73db74cbdcec4f93c8f48078a4991db7ce5a Mon Sep 17 00:00:00 2001
From: buaixuexideshitongxue <2936013465@qq.com>
Date: Wed, 14 Jan 2026 15:40:02 +0800
Subject: [PATCH] =?UTF-8?q?xls=E4=B9=9F=E8=A6=81=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  3 +-
 src/components/file/list.vue        | 14 +++++++
 src/components/file/xls-preview.vue | 63 +++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/components/file/xls-preview.vue

diff --git a/package.json b/package.json
index 94c2f5c..082e839 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "vue-router": "^4.2.5",
     "vue-video-player": "^6.0.0",
     "vue3-print-nb": "^0.1.4",
-    "webrtc-adapter": "^9.0.1"
+    "webrtc-adapter": "^9.0.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@univerjs/vite-plugin": "^0.5.0",
diff --git a/src/components/file/list.vue b/src/components/file/list.vue
index dac519e..d7134a5 100644
--- a/src/components/file/list.vue
+++ b/src/components/file/list.vue
@@ -158,6 +158,19 @@
                     >
         </div>
       </template>
+      <template
+          v-else-if="
+          getFileType(activeFile.fileName) === FileType.EXCEL &&
+          activeFile.fileName.toLowerCase().endsWith('.xls')
+        "
+      >
+        <xls-preview
+            :src="`${BASE_PATH}/file/stream/${activeFile.filePath}`"
+            style="height: 100vh; width: 60vw; overflow: auto"
+            @click.stop
+        />
+      </template>
+
       <template v-else>
         <div style="background: #fff">
           <el-result
@@ -232,6 +245,7 @@ import "@vue-office/excel/lib/index.css";
 import VueOfficeDocx from "@vue-office/docx";
 import VueOfficeExcel from "@vue-office/excel";
 import {ElMessage} from "element-plus";
+import XlsPreview from "@/components/file/xls-preview.vue";
 
 const props = defineProps({
   files: {
diff --git a/src/components/file/xls-preview.vue b/src/components/file/xls-preview.vue
new file mode 100644
index 0000000..f0e78ec
--- /dev/null
+++ b/src/components/file/xls-preview.vue
@@ -0,0 +1,63 @@
+<script setup>
+import * as XLSX from 'xlsx'
+import { ref, onMounted } from 'vue'
+import { getToken } from '@/utils/token'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  }
+})
+
+const html = ref('')
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await fetch(props.src, {
+      headers: {
+        Authorization: getToken()
+      }
+    })
+
+    const buffer = await res.arrayBuffer()
+    const workbook = XLSX.read(buffer, { type: 'array' })
+
+    const sheet = workbook.Sheets[workbook.SheetNames[0]]
+    html.value = XLSX.utils.sheet_to_html(sheet)
+  } catch (e) {
+    html.value = '<p>xls 文件解析失败，请下载查看</p>'
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="xls-preview" v-if="!loading" v-html="html"></div>
+</template>
+
+<style>
+.xls-preview {
+  background: #fff;
+  padding: 16px;
+  color: #333;
+}
+
+.xls-preview table {
+  border-collapse: collapse;
+  width: 100%;
+  background: #fff;
+}
+
+.xls-preview td,
+.xls-preview th {
+  border: 1px solid #dcdfe6;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: #333 !important;
+  background: #fff !important;
+}
+</style>