|
@@ -461,10 +461,7 @@ export default {
|
|
templateData.forEach((item) => {
|
|
templateData.forEach((item) => {
|
|
const templateSection = document.createElement("div");
|
|
const templateSection = document.createElement("div");
|
|
templateSection.className = "template-textarea";
|
|
templateSection.className = "template-textarea";
|
|
- // 使用预处理方法处理内容,包括图片处理
|
|
|
|
- templateSection.innerHTML = this.htmlProcessImages(
|
|
|
|
- this.preprocessContent(item.content)
|
|
|
|
- );
|
|
|
|
|
|
+ templateSection.innerHTML = this.preprocessContent(item.content);
|
|
contentContainer.appendChild(templateSection);
|
|
contentContainer.appendChild(templateSection);
|
|
});
|
|
});
|
|
|
|
|
|
@@ -482,121 +479,62 @@ export default {
|
|
<w:DoNotOptimizeForBrowser/>
|
|
<w:DoNotOptimizeForBrowser/>
|
|
</w:WordDocument>
|
|
</w:WordDocument>
|
|
</xml>
|
|
</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>
|
|
</html>
|
|
`;
|
|
`;
|
|
|
|
|
|
@@ -779,42 +717,38 @@ export default {
|
|
tempDiv.querySelectorAll("table").forEach((table) => {
|
|
tempDiv.querySelectorAll("table").forEach((table) => {
|
|
// 检查表格是否有边框
|
|
// 检查表格是否有边框
|
|
const hasBorder = this.detectTableBorder(table);
|
|
const hasBorder = this.detectTableBorder(table);
|
|
-
|
|
|
|
|
|
+
|
|
if (hasBorder) {
|
|
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.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 {
|
|
} 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) {
|
|
detectTableBorder(table) {
|
|
- // 1. 检查表格本身是否有边框属性
|
|
|
|
|
|
+ // 1. 检查表格本身的边框属性
|
|
if (
|
|
if (
|
|
table.getAttribute("border") ||
|
|
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;
|
|
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;
|
|
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 (
|
|
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;
|
|
},
|
|
},
|
|
|
|
|
|
// 添加处理分的辅助方法
|
|
// 添加处理分的辅助方法
|