文件预览

src/api/system/oss/index.ts

@@ -11,6 +11,37 @@ export function listOss(query: OssQuery): AxiosPromise<OssVO[]> {
   });
 }
 
+export function preview(ossId: string | number): any {
+  return request({
+    url: '/file/preview/' + ossId,
+    method: 'post',
+    responseType: 'blob'
+  });
+}
+
+export function previewTxt(ossId: string | number): any {
+  return request({
+    url: '/file/preview/' + ossId,
+    method: 'post',
+    responseType: 'blob',
+    transformResponse: [
+      async function (data) {
+        return await transformData(data)
+      }
+    ]
+  });
+}
+
+const transformData = (data: any) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.readAsText(data)
+    reader.onload = function () {
+      resolve(reader.result)
+    }
+  })
+}
+
 // 查询OSS对象基于id串
 export function listByIds(ossId: string | number): AxiosPromise<OssVO[]> {
   return request({

src/api/system/oss/types.ts

@@ -9,6 +9,7 @@ export interface OssVO extends BaseEntity {
 }
 
 export interface OssQuery extends PageQuery {
+  ossId: string | number;
   fileName: string;
   originalName: string;
   fileSuffix: string;

src/views/resourceMgt/catalogTextbookMgt/index.vue

@@ -108,7 +108,22 @@
         </el-dialog>
 
         <el-dialog v-model="previewDialog.visible" :title="previewDialog.title" width="900px" append-to-body>
-          <vue-office-docx :src="docx" />
+          <vue-office-docx v-loading="fileLoading" element-loading-text="加载中..."
+            v-if="currentFile.fileSuffix == '.doc' || currentFile.fileSuffix == '.docx'" :src="file" />
+
+          <vue-office-excel v-loading="fileLoading" element-loading-text="加载中..." :options="options"
+            style="height: 100vh;width: 100vh;"
+            v-if="currentFile.fileSuffix == '.xls' || currentFile.fileSuffix == '.xlsx'" :src="file" />
+
+          <vue-office-pdf v-loading="fileLoading" element-loading-text="加载中..." v-if="currentFile.fileSuffix == '.pdf'"
+            :src="file" />
+
+          <div v-loading="fileLoading" element-loading-text="加载中..." v-if="currentFile.fileSuffix == '.txt'"
+            style="white-space: pre-wrap;">{{ txt }}
+          </div>
+
+          <ImagePreview v-loading="fileLoading" element-loading-text="加载中..." style="width: 100%; text-align: center;"
+            v-if="imgSuffix.includes(currentFile.fileSuffix)" :src="imgUrl" />
         </el-dialog>
       </div>
     </el-col>
@@ -116,16 +131,27 @@
 </template>
 
 <script setup name="Oss" lang="ts">
-import { listOss, delOss } from '@/api/system/oss';
+import { listOss, preview, previewTxt, delOss } from '@/api/system/oss';
 import ImagePreview from '@/components/ImagePreview/index.vue';
 import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
 
+//引入VueOfficeDocx组件
 import VueOfficeDocx from '@vue-office/docx'
+//引入相关样式
 import '@vue-office/docx/lib/index.css'
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+const fileSuffix = ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf']
+const imgSuffix = ['.jpg', '.png', '.jpeg', '.gif', '.bmp']
+
 const activeName = ref('first')
 
 const ossList = ref<OssVO[]>([]);
@@ -146,7 +172,6 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
-const docx = ref('http://101.37.69.204:9001/mentalhealth/2024/04/22/24b50eee715048018eec53cad99b9e25.docx')
 const previewDialog = reactive<DialogOption>({
   visible: false,
   title: '文件预览'
@@ -167,6 +192,7 @@ const data = reactive<PageData<OssForm, OssQuery>>({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
+    ossId: '',
     fileName: '',
     originalName: '',
     fileSuffix: '',
@@ -326,11 +352,41 @@ const handleTabClick = () => {
 
 }
 
+const options = ref({
+  xls: false,       //预览xlsx文件设为false；预览xls文件设为true
+  minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+  minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
+  widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
+  heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
+  beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
+  transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
+})
+
 const currentFile = ref()
-const handlePreview = (row: OssVO) => {
+const file = ref('')
-  console.log(row)
+const fileLoading = ref(false)
+const txt = ref('')
+const imgUrl = ref('')
+const handlePreview = async (row: OssVO) => {
+  file.value = ''
+  fileLoading.value = true
   previewDialog.visible = true
-  currentFile.value = row.curl
+  currentFile.value = row
+
+  if (row.fileSuffix == '.txt') {
+    const fileRes = await previewTxt(row.ossId)
+    console.log(fileRes)
+    txt.value = fileRes
+  } else if (imgSuffix.includes(row.fileSuffix)) {
+    const fileRes = await preview(row.ossId)
+    let blob = new Blob([fileRes], { type: `image/${row.fileSuffix.substring(1)}` })
+    imgUrl.value = URL.createObjectURL(blob)
+  } else if(fileSuffix.includes(row.fileSuffix)){
+    const fileRes = await preview(row.ossId)
+    fileRes.arrayBuffer().then(res => file.value = res)
+  }
+
+  fileLoading.value = false
 }
 
 onMounted(() => {