yangg 5 miesięcy temu
rodzic
commit
8097ceb022
1 zmienionych plików z 105 dodań i 172 usunięć
  1. 105 172
      src/views/project/components/dataList.vue

+ 105 - 172
src/views/project/components/dataList.vue

@@ -461,10 +461,7 @@ export default {
         templateData.forEach((item) => {
           const templateSection = document.createElement("div");
           templateSection.className = "template-textarea";
-          // 使用预处理方法处理内容,包括图片处理
-          templateSection.innerHTML = this.htmlProcessImages(
-            this.preprocessContent(item.content)
-          );
+          templateSection.innerHTML = this.preprocessContent(item.content);
           contentContainer.appendChild(templateSection);
         });
 
@@ -482,121 +479,62 @@ export default {
                 <w:DoNotOptimizeForBrowser/>
               </w:WordDocument>
             </xml>
-              <style>
-                /* 基础表格样式 */
-                table {
-                  width: 100%;
-                  margin: 8px 0;
-                  table-layout: fixed;
-                }
-                
-                /* 有边框表格样式 */
-                table[data-border="true"],
-                .table-with-border {
-                  border-collapse: collapse !important;
-                  border: 1px solid black !important;
-                  margin-bottom: 1em;
-                }
-                
-                /* 确保表格行不会在页面边界断开 */
-                table[data-border="true"] tr,
-                .table-with-border tr {
-                  page-break-inside: avoid !important;
-                }
-                
-                /* 表格单元样 */
-                table[data-border="true"] td,
-                table[data-border="true"] th,
-                .table-with-border td,
-                .table-with-border th {
-                  border: 1px solid black !important;
-                  padding: 6px;
-                  word-wrap: break-word;
-                  overflow: hidden;
-                }
-                
-                /* 表格头部样式 */
-                table[data-border="true"] thead,
-                .table-with-border thead {
-                  display: table-header-group;
-                }
-                
-                /* 表格主体样式 */
-                table[data-border="true"] tbody,
-                .table-with-border tbody {
-                  display: table-row-group;
-                }
-                
-                /* 确保跨页时边框正确显示 */
-                @media print {
-                  table[data-border="true"],
-                  .table-with-border {
-                    -webkit-print-color-adjust: exact;
-                    color-adjust: exact;
-                    border-collapse: collapse !important;
-                  }
-                  
-                  table[data-border="true"] tr,
-                  .table-with-border tr {
-                    border-top: 1px solid black !important;
-                    border-bottom: 1px solid black !important;
-                  }
-                  
-                  /* 确保打印时表格边框显示完整 */
-                  table[data-border="true"] td,
-                  table[data-border="true"] th,
-                  .table-with-border td,
-                  .table-with-border th {
-                    border: 1px solid black !important;
-                    -webkit-print-color-adjust: exact;
-                    color-adjust: exact;
-                  }
-                }
-                
-                /* 无边框表格样式 */
-                table[data-border="false"],
-                .table-no-border {
-                  border: none !important;
-                }
-                
-                table[data-border="false"] td,
-                table[data-border="false"] th,
-                .table-no-border td,
-                .table-no-border th {
-                  border: none !important;
-                  padding: 6px;
-                }
-                 /* 图片相关样式 */
-                .WordImage {
-                  margin: 10pt 0;
-                  page-break-inside: avoid;
-                  clear: both;
-                }
-                
-                img {
-                  max-width: 100%;
-                  display: block;
-                  page-break-inside: avoid;
-                  -ms-interpolation-mode: bicubic;
-                }
-                
-                /* Word特定的图片容器样式 */
-                v\\:shape, v\\:imagedata {
-                  behavior: url(#default#VML);
-                }
-                
-                /* 确保图片容器继承父元素的对齐方式 */
-                p[style*="text-align"] .WordImage {
-                  margin-left: auto;
-                  margin-right: auto;
-                }
-              </style>
-            </head>
-            <body>
-              ${this.processTableHeaders(
-                this.processContentForWord(contentContainer.innerHTML)
-              )}
-            </body>
+            <style>
+              /* 基础表格样式 */
+              table {
+                width: 100%;
+                border-collapse: collapse !important;
+                margin: 8px 0;
+              }
+              
+              /* 有边框表格样式 */
+              table[data-code="active"] {
+                border: 1px solid black !important;
+                border-collapse: collapse !important;
+              }
+              
+              table[data-code="active"] td,
+              table[data-code="active"] th {
+                border: 1px solid black !important;
+                padding: 6px !important;
+                mso-border-alt: solid black .5pt !important;
+                mso-border-insideh: .5pt solid black !important;
+                mso-border-insidev: .5pt solid black !important;
+              }
+              
+              /* 无边框表格样式 */
+              table[data-code="noactive"] {
+                border: none !important;
+                border-collapse: collapse !important;
+              }
+              
+              table[data-code="noactive"] td,
+              table[data-code="noactive"] th {
+                border: none !important;
+                padding: 6px !important;
+              }
+              
+              /* Word特定的表格边框样式 */
+              .MsoNormalTable {
+                mso-style-name: "普通表格";
+                mso-tstyle-rowband-size: 0;
+                mso-tstyle-colband-size: 0;
+                mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
+              }
+              
+              /* 确保分页时边框正确显示 */
+              tr {
+                page-break-inside: avoid !important;
+              }
+              
+              td, th {
+                page-break-inside: avoid !important;
+              }
+            </style>
+          </head>
+          <body>
+            ${this.processContentForWord(contentContainer.innerHTML)}
+          </body>
           </html>
         `;
 
@@ -779,42 +717,38 @@ export default {
       tempDiv.querySelectorAll("table").forEach((table) => {
         // 检查表格是否有边框
         const hasBorder = this.detectTableBorder(table);
-
+        
         if (hasBorder) {
-          // 为有边框的表格添加必要的类和属性
-          table.classList.add("table-with-border");
-          table.setAttribute("data-border", "true");
-
-          // 确保表格基本样式
+          // 为有边框的表格添加必要的属性和类
+          table.setAttribute("data-code", "active");
+          table.setAttribute("class", "MsoNormalTable");
+          table.setAttribute("border", "1");
           table.style.borderCollapse = "collapse";
-          table.style.width = "100%";
-          table.style.pageBreakInside = "auto";
-
-          // 处理所有行
-          table.querySelectorAll("tr").forEach((row, rowIndex) => {
-            row.setAttribute("data-row-index", rowIndex);
-            row.style.pageBreakInside = "avoid";
-
-            // 处理所有单元格
-            row.querySelectorAll("td, th").forEach((cell) => {
-              // 保存原有样式
-              const originalStyles = cell.getAttribute("style") || "";
-
-              // 合并新样式和原有样式
-              cell.style.cssText = `
-                border: 1px solid black !important;
-                border-collapse: collapse !important;
-                padding: 6px;
-                word-wrap: break-word;
-                overflow: hidden;
-                ${originalStyles}
-              `;
-            });
+          
+          // 处理所有单元格
+          table.querySelectorAll("td, th").forEach((cell) => {
+            // 保存原有样式
+            const originalStyles = cell.getAttribute("style") || "";
+            
+            // 添加Word特定的边框样式
+            cell.style.cssText = `
+              border: 1px solid black !important;
+              mso-border-alt: solid black .5pt !important;
+              padding: 6px !important;
+              ${originalStyles}
+            `;
           });
         } else {
           // 处理无边框表格
-          table.classList.add("table-no-border");
-          table.setAttribute("data-border", "false");
+          table.setAttribute("data-code", "noactive");
+          table.removeAttribute("border");
+          table.style.border = "none";
+          
+          // 移除所有单元格边框
+          table.querySelectorAll("td, th").forEach((cell) => {
+            cell.style.border = "none";
+            cell.style.padding = "6px";
+          });
         }
       });
 
@@ -823,40 +757,39 @@ export default {
 
     // 添加检测表格边框的方法
     detectTableBorder(table) {
-      // 1. 检查表格本身是否有边框属性
+      // 1. 检查表格本身边框属性
       if (
         table.getAttribute("border") ||
-        table.style.border ||
-        table.classList.contains("bordered")
+        /border(?!-collapse)/.test(table.style.cssText) ||
+        table.classList.contains("bordered") ||
+        table.hasAttribute("rules")
       ) {
         return true;
       }
 
-      // 2. 检查表格样式是否包含边框相关属性
-      const tableStyle = window.getComputedStyle(table);
-      if (tableStyle.border || tableStyle.borderCollapse === "collapse") {
+      // 2. 检查计算样式
+      const computedStyle = window.getComputedStyle(table);
+      if (
+        computedStyle.border !== "none" ||
+        computedStyle.borderCollapse === "collapse"
+      ) {
         return true;
       }
 
-      // 3. 检查单元格是否有边框
-      const cells = table.querySelectorAll("td, th");
-      const hasCellBorder = Array.from(cells).some((cell) => {
-        const style = window.getComputedStyle(cell);
+      // 3. 检查第一个单元格的边框
+      const firstCell = table.querySelector("td, th");
+      if (firstCell) {
+        const cellStyle = window.getComputedStyle(firstCell);
         return (
-          style.border ||
-          style.borderTop ||
-          style.borderBottom ||
-          style.borderLeft ||
-          style.borderRight
+          cellStyle.border !== "none" ||
+          cellStyle.borderTop !== "none" ||
+          cellStyle.borderBottom !== "none" ||
+          cellStyle.borderLeft !== "none" ||
+          cellStyle.borderRight !== "none"
         );
-      });
-
-      // 4. 检查是否有特定的无边框标记
-      const hasNoBorderMark =
-        table.classList.contains("no-border") ||
-        table.getAttribute("data-no-border") === "true";
+      }
 
-      return hasCellBorder && !hasNoBorderMark;
+      return false;
     },
 
     // 添加处理分的辅助方法