|
@@ -210,9 +210,9 @@
|
|
<el-dropdown-menu>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="word">Word格式</el-dropdown-item>
|
|
<el-dropdown-item command="word">Word格式</el-dropdown-item>
|
|
<el-dropdown-item command="pdf">PDF格式</el-dropdown-item>
|
|
<el-dropdown-item command="pdf">PDF格式</el-dropdown-item>
|
|
- <!-- <el-dropdown-item command="pdf-to-word"
|
|
|
|
|
|
+ <el-dropdown-item command="pdf-to-word"
|
|
>PDF转Word</el-dropdown-item
|
|
>PDF转Word</el-dropdown-item
|
|
- > -->
|
|
|
|
|
|
+ >
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-dropdown>
|
|
@@ -410,174 +410,172 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- // 修改后的导出文档方法
|
|
|
|
|
|
+ // 修改导出文档的方法,确保表格有边框
|
|
async exportDocument(template) {
|
|
async exportDocument(template) {
|
|
try {
|
|
try {
|
|
- // 解析模版内容
|
|
|
|
const templateData = JSON.parse(template.data || "[]");
|
|
const templateData = JSON.parse(template.data || "[]");
|
|
|
|
|
|
- // 创建一个临时的容器来存放内容
|
|
|
|
|
|
+ // 创建一个处理样式的函数
|
|
|
|
+ const processStyles = (element) => {
|
|
|
|
+ // 保留原有的样式
|
|
|
|
+ const originalStyle = element.getAttribute("style") || "";
|
|
|
|
+
|
|
|
|
+ // 处理字体颜色
|
|
|
|
+ const color = window.getComputedStyle(element).color;
|
|
|
|
+ if (color && color !== "rgb(0, 0, 0)") {
|
|
|
|
+ element.style.color = color;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理字体大小
|
|
|
|
+ const fontSize = window.getComputedStyle(element).fontSize;
|
|
|
|
+ if (fontSize && fontSize !== "16px") {
|
|
|
|
+ element.style.fontSize = fontSize;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理字体粗细
|
|
|
|
+ const fontWeight = window.getComputedStyle(element).fontWeight;
|
|
|
|
+ if (fontWeight && fontWeight !== "normal") {
|
|
|
|
+ element.style.fontWeight = fontWeight;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理背景色
|
|
|
|
+ const backgroundColor =
|
|
|
|
+ window.getComputedStyle(element).backgroundColor;
|
|
|
|
+ if (backgroundColor && backgroundColor !== "transparent") {
|
|
|
|
+ element.style.backgroundColor = backgroundColor;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理对齐方式
|
|
|
|
+ const textAlign = window.getComputedStyle(element).textAlign;
|
|
|
|
+ if (textAlign && textAlign !== "left") {
|
|
|
|
+ element.style.textAlign = textAlign;
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
const contentContainer = document.createElement("div");
|
|
const contentContainer = document.createElement("div");
|
|
contentContainer.className = "content";
|
|
contentContainer.className = "content";
|
|
|
|
|
|
- // 处理每个模版段落
|
|
|
|
- templateData.forEach((item) => {
|
|
|
|
|
|
+ templateData.forEach((item, index) => {
|
|
const templateSection = document.createElement("div");
|
|
const templateSection = document.createElement("div");
|
|
templateSection.className = "template-textarea";
|
|
templateSection.className = "template-textarea";
|
|
|
|
|
|
- // 创建临时div来解析HTML
|
|
|
|
const tempDiv = document.createElement("div");
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = item.content;
|
|
tempDiv.innerHTML = item.content;
|
|
|
|
|
|
- // 处理标题格式
|
|
|
|
- tempDiv
|
|
|
|
- .querySelectorAll("h1, h2, h3, h4, h5, h6")
|
|
|
|
- .forEach((heading) => {
|
|
|
|
- heading.style.fontWeight = "bold";
|
|
|
|
- heading.style.margin = "1em 0";
|
|
|
|
-
|
|
|
|
- switch (heading.tagName.toLowerCase()) {
|
|
|
|
- case "h1":
|
|
|
|
- heading.style.fontSize = "24pt";
|
|
|
|
- break;
|
|
|
|
- case "h2":
|
|
|
|
- heading.style.fontSize = "18pt";
|
|
|
|
- break;
|
|
|
|
- case "h3":
|
|
|
|
- heading.style.fontSize = "14pt";
|
|
|
|
- break;
|
|
|
|
- case "h4":
|
|
|
|
- case "h5":
|
|
|
|
- case "h6":
|
|
|
|
- heading.style.fontSize = "12pt";
|
|
|
|
- break;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ // 处理所有元素的样式
|
|
|
|
+ const allElements = tempDiv.getElementsByTagName("*");
|
|
|
|
+ Array.from(allElements).forEach((element) => {
|
|
|
|
+ processStyles(element);
|
|
|
|
+
|
|
|
|
+ // 特别处理表格
|
|
|
|
+ if (element.tagName === "TABLE") {
|
|
|
|
+ element.style.borderCollapse = "collapse";
|
|
|
|
+ element.style.width = "100%";
|
|
|
|
+ element.style.border = "1pt solid windowtext";
|
|
|
|
+ element.style.msoTableLspace = "0pt";
|
|
|
|
+ element.style.msoTableRspace = "0pt";
|
|
|
|
+ element.style.msoBorderAlt = "solid windowtext .5pt";
|
|
|
|
+ element.style.msoPaddingAlt = "0cm 5.4pt 0cm 5.4pt";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理表格单元格
|
|
|
|
+ if (element.tagName === "TD" || element.tagName === "TH") {
|
|
|
|
+ element.style.border = "1pt solid windowtext";
|
|
|
|
+ element.style.padding = "5pt";
|
|
|
|
+ element.style.msoBorderAlt = "solid windowtext .5pt";
|
|
|
|
|
|
- // 处理表格
|
|
|
|
- tempDiv.querySelectorAll("table").forEach((table) => {
|
|
|
|
- // 设置表格属性
|
|
|
|
- table.setAttribute("border", "1");
|
|
|
|
- table.setAttribute("cellspacing", "0");
|
|
|
|
- table.setAttribute("cellpadding", "5");
|
|
|
|
- table.style.borderCollapse = "collapse";
|
|
|
|
- table.style.width = "100%";
|
|
|
|
- table.style.border = "1px solid black";
|
|
|
|
-
|
|
|
|
- // 处理所有单元格
|
|
|
|
- const cells = table.querySelectorAll("td, th");
|
|
|
|
- cells.forEach((cell) => {
|
|
|
|
- cell.style.border = "1px solid black";
|
|
|
|
- cell.style.padding = "5px";
|
|
|
|
- if (cell.tagName === "TH") {
|
|
|
|
- cell.style.backgroundColor = "#f0f0f0";
|
|
|
|
- cell.style.fontWeight = "bold";
|
|
|
|
|
|
+ if (element.tagName === "TH") {
|
|
|
|
+ element.style.backgroundColor = "#f0f0f0";
|
|
|
|
+ element.style.fontWeight = "bold";
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ }
|
|
});
|
|
});
|
|
|
|
|
|
templateSection.innerHTML = tempDiv.innerHTML;
|
|
templateSection.innerHTML = tempDiv.innerHTML;
|
|
contentContainer.appendChild(templateSection);
|
|
contentContainer.appendChild(templateSection);
|
|
});
|
|
});
|
|
|
|
|
|
- // 构建HTML内容
|
|
|
|
let contentData = `
|
|
let contentData = `
|
|
- <!DOCTYPE html>
|
|
|
|
- <html xmlns:o='urn:schemas-microsoft-com:office:office'
|
|
|
|
- xmlns:w='urn:schemas-microsoft-com:office:word'
|
|
|
|
- xmlns='http://www.w3.org/TR/REC-html40'>
|
|
|
|
- <head>
|
|
|
|
- <meta charset="UTF-8">
|
|
|
|
- <title>${template.title}</title>
|
|
|
|
- <xml>
|
|
|
|
- <w:WordDocument>
|
|
|
|
- <w:View>Print</w:View>
|
|
|
|
- <w:Zoom>100</w:Zoom>
|
|
|
|
- <w:DoNotOptimizeForBrowser/>
|
|
|
|
- </w:WordDocument>
|
|
|
|
- </xml>
|
|
|
|
- <style>
|
|
|
|
- /* 重置样式 */
|
|
|
|
- * {
|
|
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 页面设置 */
|
|
|
|
- @page {
|
|
|
|
- size: A4;
|
|
|
|
- margin: 2cm;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 基本样式 */
|
|
|
|
- body {
|
|
|
|
- font-family: "Times New Roman", SimSun, serif;
|
|
|
|
- font-size: 12pt;
|
|
|
|
- line-height: 1.5;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 标题样式 */
|
|
|
|
- h1 { font-size: 24pt; margin: 1em 0; }
|
|
|
|
- h2 { font-size: 18pt; margin: 1em 0; }
|
|
|
|
- h3 { font-size: 14pt; margin: 1em 0; }
|
|
|
|
- h4, h5, h6 { font-size: 12pt; margin: 1em 0; }
|
|
|
|
-
|
|
|
|
- /* 表格样式 */
|
|
|
|
- table {
|
|
|
|
- width: 100%;
|
|
|
|
- border-collapse: collapse;
|
|
|
|
- border: 1px solid black;
|
|
|
|
- margin: 1em 0;
|
|
|
|
- mso-table-lspace: 0pt;
|
|
|
|
- mso-table-rspace: 0pt;
|
|
|
|
- mso-border-alt: solid windowtext .5pt;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- td, th {
|
|
|
|
- border: 1px solid black;
|
|
|
|
- padding: 5px;
|
|
|
|
- mso-border-alt: solid windowtext .5pt;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- th {
|
|
|
|
- background-color: #f0f0f0;
|
|
|
|
- font-weight: bold;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* Word特定样式 */
|
|
|
|
- .MsoNormal {
|
|
|
|
- margin-bottom: .0001pt;
|
|
|
|
- text-align: justify;
|
|
|
|
- text-justify: inter-ideograph;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 分页控制 */
|
|
|
|
- .template-textarea {
|
|
|
|
- page-break-after: always;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- /* 隐藏目录 */
|
|
|
|
- .TOC {
|
|
|
|
- display: none !important;
|
|
|
|
- }
|
|
|
|
- </style>
|
|
|
|
- <!--[if gte mso 9]>
|
|
|
|
- <xml>
|
|
|
|
- <w:WordDocument>
|
|
|
|
- <w:View>Print</w:View>
|
|
|
|
- <w:Zoom>100</w:Zoom>
|
|
|
|
- <w:DoNotOptimizeForBrowser/>
|
|
|
|
- </w:WordDocument>
|
|
|
|
- </xml>
|
|
|
|
- <![endif]-->
|
|
|
|
- </head>
|
|
|
|
- <body>
|
|
|
|
- ${contentContainer.innerHTML}
|
|
|
|
- </body>
|
|
|
|
- </html>`;
|
|
|
|
|
|
+ <!DOCTYPE html>
|
|
|
|
+ <html xmlns:o='urn:schemas-microsoft-com:office:office'
|
|
|
|
+ xmlns:w='urn:schemas-microsoft-com:office:word'
|
|
|
|
+ xmlns:v='urn:schemas-microsoft-com:vml'
|
|
|
|
+ xmlns='http://www.w3.org/TR/REC-html40'>
|
|
|
|
+ <head>
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
+ <xml>
|
|
|
|
+ <w:WordDocument>
|
|
|
|
+ <w:View>Print</w:View>
|
|
|
|
+ <w:Zoom>100</w:Zoom>
|
|
|
|
+ <w:DoNotOptimizeForBrowser/>
|
|
|
|
+ <w:TrackMoves>false</w:TrackMoves>
|
|
|
|
+ <w:TrackFormatting/>
|
|
|
|
+ <w:ValidateAgainstSchemas/>
|
|
|
|
+ <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
|
|
|
|
+ <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
|
|
|
|
+ <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
|
|
|
|
+ <w:DoNotPromoteQF/>
|
|
|
|
+ <w:LidThemeOther>EN-US</w:LidThemeOther>
|
|
|
|
+ <w:LidThemeAsian>ZH-CN</w:LidThemeAsian>
|
|
|
|
+ <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
|
|
|
|
+ <w:Compatibility>
|
|
|
|
+ <w:BreakWrappedTables/>
|
|
|
|
+ <w:SnapToGridInCell/>
|
|
|
|
+ <w:WrapTextWithPunct/>
|
|
|
|
+ <w:UseAsianBreakRules/>
|
|
|
|
+ <w:DontGrowAutofit/>
|
|
|
|
+ <w:SplitPgBreakAndParaMark/>
|
|
|
|
+ <w:EnableOpenTypeKerning/>
|
|
|
|
+ <w:DontFlipMirrorIndents/>
|
|
|
|
+ <w:OverrideTableStyleHps/>
|
|
|
|
+ </w:Compatibility>
|
|
|
|
+ </w:WordDocument>
|
|
|
|
+ </xml>
|
|
|
|
+ <style>
|
|
|
|
+ /* 基础样式 */
|
|
|
|
+ body, div, table, td, p {
|
|
|
|
+ font-family: "SimSun", "宋体", serif;
|
|
|
|
+ font-size: 10.5pt;
|
|
|
|
+ line-height: 1.5;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 表格样式 */
|
|
|
|
+ table {
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ width: 100%;
|
|
|
|
+ mso-table-layout-alt: fixed;
|
|
|
|
+ mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
|
|
|
|
+ border:1px solid #000 !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 分页样式 */
|
|
|
|
+ .template-textarea {
|
|
|
|
+ page-break-after: always;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* Word特定样式 */
|
|
|
|
+ @page {
|
|
|
|
+ mso-page-orientation: portrait;
|
|
|
|
+ margin: 1.0in;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 确保中文正确显示 */
|
|
|
|
+ @font-face {
|
|
|
|
+ font-family: "SimSun";
|
|
|
|
+ panose-1: 2 1 6 0 3 1 1 1 1 1;
|
|
|
|
+ mso-font-alt: SimSun;
|
|
|
|
+ mso-font-charset: 134;
|
|
|
|
+ mso-generic-font-family: auto;
|
|
|
|
+ mso-font-pitch: variable;
|
|
|
|
+ mso-font-signature: 3 680460288 22 0 262145 0;
|
|
|
|
+ }
|
|
|
|
+ </style>
|
|
|
|
+ </head>
|
|
|
|
+ <body>
|
|
|
|
+ ${contentContainer.innerHTML}
|
|
|
|
+ </body>
|
|
|
|
+ </html>`;
|
|
|
|
|
|
- // 调用导出接口
|
|
|
|
const res = await exportDocument({
|
|
const res = await exportDocument({
|
|
content: contentData,
|
|
content: contentData,
|
|
title: template.title,
|
|
title: template.title,
|
|
@@ -585,6 +583,13 @@ export default {
|
|
format: "docx",
|
|
format: "docx",
|
|
encoding: "utf-8",
|
|
encoding: "utf-8",
|
|
preserveStyles: true,
|
|
preserveStyles: true,
|
|
|
|
+ pageOrientation: "portrait",
|
|
|
|
+ margins: {
|
|
|
|
+ top: "2.54cm",
|
|
|
|
+ right: "2.54cm",
|
|
|
|
+ bottom: "2.54cm",
|
|
|
|
+ left: "2.54cm",
|
|
|
|
+ },
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
@@ -593,7 +598,6 @@ export default {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
- // 处理文件下载
|
|
|
|
const link = document.createElement("a");
|
|
const link = document.createElement("a");
|
|
link.href = res.data.file_path;
|
|
link.href = res.data.file_path;
|
|
link.download = `${template.title}.docx`;
|
|
link.download = `${template.title}.docx`;
|