From 2c5b80e641b4b857bf7ed3613a113f236884d6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E9=98=94?= <yukuo_ah@bonc.com.cn>
Date: Tue, 5 Nov 2024 14:40:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E5=8A=9F=E8=83=BD=E7=9A=84=E9=85=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PreViewFile/src/PreViewFile.vue           | 122 ++++++++++++++++--
 1 file changed, 112 insertions(+), 10 deletions(-)

diff --git a/src/components/PreViewFile/src/PreViewFile.vue b/src/components/PreViewFile/src/PreViewFile.vue
index ce165d6..81f132b 100644
--- a/src/components/PreViewFile/src/PreViewFile.vue
+++ b/src/components/PreViewFile/src/PreViewFile.vue
@@ -21,13 +21,103 @@ const fetchDocFile = async ()=>{
     // 假设你有一个API可以返回DOC文件流  
     const response = await queryFileFlowRepTemplateApi(fileData);
     console.log(response,"response文件流信息");
-    const { data } = response;
-    const arrayBuffer = new File([data], 'document.docx', { type: 'docx' }).arrayBuffer();
-    console.log(arrayBuffer,"arrayBuffer");
-    const result = mammoth.convertToHtml({ arrayBuffer });  
-    console.log(result,"result信息");
+    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 = await new File([data], 'document.docx', { type: data.type }).arrayBuffer();
+    if (!(arrayBuffer instanceof ArrayBuffer)) {
+      throw new Error('Invalid arrayBuffer type');
+    }
+    // 配置 styleMap 以支持表格解析
+    const styleMap = `
+          p[style-name='Heading 1'] => h1:fresh
+          p[style-name='Heading 2'] => h2:fresh
+          p[style-name='Heading 3'] => h3:fresh
+          table => table
+          tr => tr
+          td => td
+          p[style-name='Normal'] => p
+          p[style-name='List Paragraph'] => ul > li:fresh
+          header => div.header
+          footer => div.footer
+        `;
+    let result;
+    try {
+      result = await mammoth.convertToHtml({
+        arrayBuffer,
+        styleMap,
+        includeDefaultStyleMap: true,
+        extractImages: {
+          // 自定义图片处理函数
+          getAltText: (image) => {
+            return image.contentId; // 可以根据需要返回图片的 alt 文本
+          },
+          getImageUrl: (image) => {
+            // 将图片转换为 base64 编码的 URL
+            const contentType = image.contentType;
+            const base64Data = Buffer.from(image.data).toString('base64');
+            return `data:${contentType};base64,${base64Data}`;
+          }
+        },
+        transformDocument: (document) => {
+          // 自定义处理文档，例如提取页眉和页脚
+          const headers = document.children.filter(child => child.type === 'header');
+          const footers = document.children.filter(child => child.type === 'footer');
+
+          // 将页眉和页脚插入到文档的适当位置
+          headers.forEach(header => {
+            document.children.push({
+              type: 'custom',
+              name: 'div',
+              attributes: { class: 'header' },
+              children: header.children
+            });
+          });
+
+          footers.forEach(footer => {
+            document.children.push({
+              type: 'custom',
+              name: 'div',
+              attributes: { class: 'footer' },
+              children: footer.children
+            });
+          });
+
+          return document;
+        }
+      });
+    } catch (convertError) {
+      console.error('Error converting DOC file to HTML:', convertError);
+      throw convertError;
+    }
+    console.log(result,"result信息"); 
+    // 添加边框线的CSS样式
+    const cssStyles = `
+      <style>
+        table {
+          border-collapse: collapse;
+          width: 100%;
+        }
+        th, td {
+          border: 1px solid black;
+          padding: 8px;
+        }
+      </style>
+    `;
     // 将生成的HTML内容赋值给htmlContent  
-    htmlContent.value = result.value; // result.value 包含转换后的HTML  
+    htmlContent.value = `${cssStyles}${result.value}`; // result.value 包含转换后的HTML  
     // 如果需要显示消息，可以使用 result.messages  
   } catch (error) {  
     console.error('Error fetching or converting DOC file:', error);  
@@ -38,13 +128,25 @@ fetchDocFile();
  
 
 <template>
-  <div>
-    <!-- <input type="file" @change="handleChange" /> -->
+  <div class="wrap">
     <!-- <VueOfficeDocx :src="docxSrc" :rendered="rendered" /> -->
-    <div v-html="htmlContent"></div>
+    <div v-html="htmlContent" class="htmlContent"></div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+  .htmlContent {
+    height: 100vh;
+    overflow: auto;
+    background-color: #fff;
+    padding:50px;
+  }
+  table{
+    border-collapse: collapse;
+  }
+  td{
+    border:1px solid #999;
+  }
+</style>