修改文件预览

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);  
+    const response = await queryFileFlowRepTemplateApi(fileData);
     console.log(response,"response文件流信息");
-    const arrayBuffer = response.data.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 { data, headers } = response;
+      if(headers['status'] == 500){// 说明此时下载文件有错误，需要获取WARN和ERROR的值
+        const code = headers['error']?headers['error'].substring(headers['error'].length-4):'1003';
+        console.log(code)
+        switch(code){
+          case "1001":
+          case "1002":
+            ElMessage.error(downLoadErrorMsg[code]);
+            break;
+          default:
+            ElMessage.error(downLoadErrorMsg['1003']);
+            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>