修改文件预览

src/components/PreViewFile/src/PreViewFile.vue

@@ -3,6 +3,7 @@ import mammoth from 'mammoth';
 import "@vue-office/docx/lib/index.css";
 import { reactive,ref } from "vue";
 import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
 import {queryFileFlowRepTemplateApi} from '@/api/reporting/RepTemplate/RepTemplate';
 const route = useRoute();
 // 也可以直接是在线地址
@@ -11,23 +12,33 @@ const pageQuery = ref(route || null);
 const fileData = pageQuery.value?.query?.fileData;
 //是否渲染完成
 let htmlContent = ref("");
+const downLoadErrorMsg = {
+  "1001":"预览失败,文件路径不存在",
+  "1002":"预览失败,未找到文件信息",
+  "1003":"预览失败,请联系管理员",
+}
 const fetchDocFile = async ()=>{  
   try {  
     // 假设你有一个API可以返回DOC文件流  
     const response = await queryFileFlowRepTemplateApi(fileData);
     console.log(response,"response文件流信息");
-    const arrayBuffer = response.data.arrayBuffer();
+    const { data, headers } = response;
-    // 或者使用FileReader
+      if(headers['status'] == 500){// 说明此时下载文件有错误，需要获取WARN和ERROR的值
-    // const reader = new FileReader();
+        const code = headers['error']?headers['error'].substring(headers['error'].length-4):'1003';
-    // reader.onload = function(event) {
+        console.log(code)
-    //     const arrayBuffer = event.target.result;
+        switch(code){
-    //     // 处理arrayBuffer
+          case "1001":
-    // };
+          case "1002":
-    // reader.onerror = function(error) {
+            ElMessage.error(downLoadErrorMsg[code]);
-    //     console.error('转换出错:', error);
+            break;
-    //     // 错误处理
+          default:
-    // };
+            ElMessage.error(downLoadErrorMsg['1003']);
-    // reader.readAsArrayBuffer(fileData);
+            break;
+        }
+      return;
+    }
+    const arrayBuffer = new File([data], 'document.docx', { type: 'doc' }).arrayBuffer();
+    console.log(arrayBuffer,"arrayBuffer");
     const result = mammoth.convertToHtml({ arrayBuffer });  
     console.log(result,"result信息");
     // 将生成的HTML内容赋值给htmlContent  
@@ -38,7 +49,6 @@ const fetchDocFile = async ()=>{
   }  
 } 
 fetchDocFile();
-
 </script>