添加文件的预览选项

src/components/PreViewFile/index.ts

@@ -0,0 +1,3 @@
+import PreViewFile from './src/PreViewFile.vue'
+
+export { PreViewFile }

src/components/PreViewFile/src/PreViewFile.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import VueOfficeDocx from "@vue-office/docx";
+import mammoth from 'mammoth'; 
+import "@vue-office/docx/lib/index.css";
+import { reactive,ref } from "vue";
+import { useRoute } from 'vue-router';
+const route = useRoute();
+// 也可以直接是在线地址
+let docxSrc = ref("");
+//获取当前文件的信息
+const pageQuery = ref(route || null); 
+const fileData = pageQuery.value?.query?.fileData;
+//是否渲染完成
+let rendered = ()=>{
+  console.log("渲染完成");
+}
+let htmlContent = ref("");
+const fetchDocFile = async ()=>{  
+  try {  
+    // 假设你有一个API可以返回DOC文件流  
+    // const response = await axios.get('/api/get-doc-file', {  
+    //   responseType: 'blob' // 确保返回的是blob类型  
+    // });  
+    const arrayBuffer = new Blob(fileData).arrayBuffer();
+    // 或者使用FileReader
+    // const reader = new FileReader();
+    // reader.onload = function(event) {
+    //     const arrayBuffer = event.target.result;
+    //     // 处理arrayBuffer
+    // };
+    // reader.onerror = function(error) {
+    //     console.error('转换出错:', error);
+    //     // 错误处理
+    // };
+    // reader.readAsArrayBuffer(fileData);
+    const result = mammoth.convertToHtml({ arrayBuffer });  
+    console.log(result,"result信息");
+    // 将生成的HTML内容赋值给htmlContent  
+    htmlContent.value = result.value; // result.value 包含转换后的HTML  
+    // 如果需要显示消息，可以使用 result.messages  
+  } catch (error) {  
+    console.error('Error fetching or converting DOC file:', error);  
+  }  
+} 
+fetchDocFile();
+
+</script>
+ 
+
+<template>
+  <div>
+    <!-- <input type="file" @change="handleChange" /> -->
+    <!-- <VueOfficeDocx :src="docxSrc" :rendered="rendered" /> -->
+    <div v-html="htmlContent"></div>
+  </div>
+</template>
+
+<style scoped></style>
+
+

src/router/index.ts

@@ -86,6 +86,17 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
       noTagsView: true,
     },
   },
+  /* ----------------------在线Word的预览开始------------------------- */
+  {
+    path: '/PreViewFile',
+    component: () => import('@/components/PreViewFile/src/PreViewFile.vue'),
+    name: 'PreViewFile',
+    meta: {
+      title: '文件预览',
+      hidden:true
+    },
+  },
+  /* ----------------------在线Word的预览结束------------------------- */
   //  可疑案例处理界面
   {
     path: '/caseManageT',

src/views/reporting/RepTemplate/RepTemplate.vue

@@ -22,7 +22,9 @@ import { Dialog } from '@/components/Dialog'
 import { getWidth, transfDictList } from '@/utils';
 import Detail from './components/Detail.vue'
 import { REPORTING_STATUS_LIST } from './constants'
+import { useRouter } from 'vue-router';
 
+const router = useRouter()
 const { t } = useI18n()
 
 const ids = ref<string[]>([])
@@ -115,6 +117,9 @@ const tableColumns = reactive<TableColumn[]>([
       default: (data: any) => {
         return (
           <>
+            <ElLink type="primary" underline={false} onClick={() => ShowPreViewFile(data.row)}>
+              预览
+            </ElLink>
             <ElLink type="primary" underline={false} onClick={() => action(data.row, 'edit')}>
               {t('tableDemo.edit')}
             </ElLink>
@@ -134,6 +139,7 @@ const tableColumns = reactive<TableColumn[]>([
               }}
               onConfirm={() => delData(data.row)}
             ></ElPopconfirm>
+            
           </>
         )
       }
@@ -171,7 +177,20 @@ const searchSchema = reactive<FormSchema[]>([
     component: 'DatePicker'
   }
 ])
-
+/** 预览 **/
+const ShowPreViewFile = (data)=>{
+  const routeData = router.resolve({
+    name:'PreViewFile',
+    query:{
+      fileData:data.fileFlow,
+    }
+  })
+  router.push({name:'PreViewFile',
+    query:{
+      fileData:data.fileFlow,
+  }});
+  // window.open(routeData.href,'_blank')
+}
 const searchParams = ref({})
 const setSearchParams = (data: any) => {
   searchParams.value = data
@@ -207,7 +226,7 @@ const action = async (row: TableData, type: string) => {
 }
 
 const AddAction = () => {
-  dialogTitle.value = t('tableDemo.add')
+  dialogTitle.value = "上传模板";
   currentRow.value = undefined
   dialogVisible.value = true
   actionType.value = 'add'