xls也要支持在线预览

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",

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: {

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>