|
@@ -419,42 +419,66 @@ export default {
|
|
|
|
|
|
// 创建文档内容
|
|
|
let contentData = `
|
|
|
- <!DOCTYPE html>
|
|
|
- <html>
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <style>
|
|
|
- /* 保持现有样式 */
|
|
|
- body {
|
|
|
- font-family: SimSun, serif;
|
|
|
- font-size: 12pt;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
- table {
|
|
|
- width: 100%;
|
|
|
- border-collapse: collapse;
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
- td, th {
|
|
|
- border: 1px solid black;
|
|
|
- padding: 8px;
|
|
|
- min-height: 18px;
|
|
|
- }
|
|
|
- p {
|
|
|
- margin: 6px 0;
|
|
|
- }
|
|
|
- .template-textarea {
|
|
|
- page-break-after: always;
|
|
|
- }
|
|
|
- img {
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- display: block;
|
|
|
- margin: 10px auto;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>`;
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <style>
|
|
|
+ /* 保持原有样式 */
|
|
|
+ body {
|
|
|
+ font-family: SimSun, serif; // 使用宋体作为默认字体
|
|
|
+ font-size: 12pt;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ margin: 8px 0;
|
|
|
+ table-layout: fixed;
|
|
|
+ }
|
|
|
+ td, th {
|
|
|
+ border: 1px solid black;
|
|
|
+ padding: 8px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ min-height: 18px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 6px 0;
|
|
|
+ }
|
|
|
+ .template-textarea {
|
|
|
+ page-break-after: always;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+ /* 保持原有的字体样式 */
|
|
|
+ span, div, p {
|
|
|
+ font-family: inherit;
|
|
|
+ }
|
|
|
+ /* 保持表格边框样式 */
|
|
|
+ table[border="1"] {
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+ /* 保持列表样式 */
|
|
|
+ ul, ol {
|
|
|
+ margin: 8px 0;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ /* 保持标题样式 */
|
|
|
+ h1, h2, h3, h4, h5, h6 {
|
|
|
+ font-family: SimSun, serif;
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>`;
|
|
|
|
|
|
// 处理每个模版段落
|
|
|
for (const item of templateData) {
|
|
@@ -464,24 +488,19 @@ export default {
|
|
|
// 处理图片
|
|
|
const images = tempDiv.getElementsByTagName("img");
|
|
|
for (const img of Array.from(images)) {
|
|
|
- try {
|
|
|
- // 如果图片已经是 base64 格式,直接使用
|
|
|
- if (img.src.startsWith("data:image")) {
|
|
|
- continue;
|
|
|
+ if (!img.src.startsWith("data:image")) {
|
|
|
+ try {
|
|
|
+ const response = await fetch(img.src);
|
|
|
+ const blob = await response.blob();
|
|
|
+ const base64 = await new Promise((resolve) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onloadend = () => resolve(reader.result);
|
|
|
+ reader.readAsDataURL(blob);
|
|
|
+ });
|
|
|
+ img.src = base64;
|
|
|
+ } catch (error) {
|
|
|
+ console.error("处理图片失败:", error);
|
|
|
}
|
|
|
-
|
|
|
- // 如果是URL,转换为base64
|
|
|
- const response = await fetch(img.src);
|
|
|
- const blob = await response.blob();
|
|
|
- const base64 = await new Promise((resolve) => {
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onloadend = () => resolve(reader.result);
|
|
|
- reader.readAsDataURL(blob);
|
|
|
- });
|
|
|
- img.src = base64;
|
|
|
- } catch (error) {
|
|
|
- console.error("处理图片失败:", error);
|
|
|
- // 如果转换失败,保留原始src
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -490,32 +509,51 @@ export default {
|
|
|
Array.from(tables).forEach((table) => {
|
|
|
table.setAttribute("border", "1");
|
|
|
table.style.borderCollapse = "collapse";
|
|
|
+ table.style.width = "100%";
|
|
|
+ table.style.tableLayout = "fixed";
|
|
|
|
|
|
const cells = table.getElementsByTagName("td");
|
|
|
Array.from(cells).forEach((cell) => {
|
|
|
cell.style.border = "1px solid black";
|
|
|
cell.style.padding = "8px";
|
|
|
+ cell.style.wordWrap = "break-word";
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- // 处理文本样式
|
|
|
- const textElements = tempDiv.getElementsByTagName("span");
|
|
|
- Array.from(textElements).forEach((span) => {
|
|
|
- const style = window.getComputedStyle(span);
|
|
|
- span.style.color = style.color;
|
|
|
- span.style.fontSize = style.fontSize;
|
|
|
- span.style.fontWeight = style.fontWeight;
|
|
|
+ // 保持原有样式
|
|
|
+ const elements = tempDiv.getElementsByTagName("*");
|
|
|
+ Array.from(elements).forEach((el) => {
|
|
|
+ const computedStyle = window.getComputedStyle(el);
|
|
|
+ const importantStyles = [
|
|
|
+ "color",
|
|
|
+ "background-color",
|
|
|
+ "font-size",
|
|
|
+ "font-weight",
|
|
|
+ "text-align",
|
|
|
+ "text-decoration",
|
|
|
+ "font-style",
|
|
|
+ "line-height",
|
|
|
+ "margin",
|
|
|
+ "padding",
|
|
|
+ ];
|
|
|
+
|
|
|
+ importantStyles.forEach((style) => {
|
|
|
+ const value = computedStyle.getPropertyValue(style);
|
|
|
+ if (value && value !== "initial") {
|
|
|
+ el.style[style] = value;
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
contentData += `
|
|
|
- <div class="template-textarea">
|
|
|
- ${tempDiv.innerHTML}
|
|
|
- </div>`;
|
|
|
+ <div class="template-textarea">
|
|
|
+ ${tempDiv.innerHTML}
|
|
|
+ </div>`;
|
|
|
}
|
|
|
|
|
|
contentData += `
|
|
|
- </body>
|
|
|
- </html>`;
|
|
|
+ </body>
|
|
|
+ </html>`;
|
|
|
|
|
|
// 转换为 Word 文档
|
|
|
const converted = htmlDocx.asBlob(contentData, {
|
|
@@ -526,6 +564,10 @@ export default {
|
|
|
bottom: "2.54cm",
|
|
|
left: "2.54cm",
|
|
|
},
|
|
|
+ font: {
|
|
|
+ name: "SimSun",
|
|
|
+ size: "12pt",
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
// 下载文件
|