根据word模板,使用${}占位取到数据库中的值,字体和格式我都在word中设置好了的,然后另存为mht格式,在修改mht中的代码,转化成ftl文件,实现富文本编辑器导出word。模板中有多个富文本,插入图片只会影响到当前这个富文本中的格式,而且word模板有两个,一个啥都正常。另一个就有问题。
出现问题:富文本内容如果全是文字,导出正常;如果插入图片,会导致导出来的文字变成小四。怎么解决啊。
原因是发生在word转换时出了问题。将word模板修改为mht,在改成ftl文件后,ftl文件的代码中通过style里设置样式,覆盖了body中p标签里的样式。把style标签里的样式去掉,在p标签里的span标签设置相应样式,即可解决。
(注:在p标签里设置样式不会生效,p标签里只是解析出来的文本内容)
这个问题可能是 mht 导出 Word 格式时的默认设置问题,可能会将富文本中的所有字体大小变为默认的小四号。可以尝试在导出 Word 文件之前通过 JavaScript 代码来修改样式,以修复导出后大小变化的问题。
具体而言,可采用以下策略:
针对有图片的地方,通过格式化字符串生成图片的 HTML 代码,并替换当前的图片占位符。例如:
// 假如当前段落的内容为 text,包括了一个占位符 #image#,用于展示图片。
let modifiedText = text.replace(
/#image#/g,
"<img src='http://your-image-url' style='width: XXXX; height: XXXX;' />"
);
设定一份 CSS 文件,根据需要调整字体、字号、行高等样式属性。
在生成 MHT 文件时,将 CSS 文件与 HTML 文件一起进行包装。具体实现代码如下:
const html = /* 待导出富文本的 HTML */;
// 加载外部 CSS 并添加到 HTML header 中
const cssUrl = 'path/to/your/custom.css';
const cssContent = fs.readFileSync(cssUrl, 'utf8');
const cssElement = `<style>${cssContent}</style>`;
const htmlWithCss = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>My HTML document</title>
${cssElement}
</head>
<body>${html}</body>
</html>`;
// 将 HTML 包装成 MHT 文档并导出
const mht = `From: <Saved by Microsoft Internet Explorer 11>\n
Subject: \n
Date: \n
MIME-Version: 1.0\n
Content-Type: multipart/related;\n
type="text/html";\n
boundary="----=_NextPart_01D50F22.CE126580"\n\n
${
"------=_NextPart_01D50F22.CE126580" +
"\nContent-Type: text/html;\ncharset=\"utf-8\"\nContent-Transfer-Encoding: base64" +
`.\n\n${Buffer.from(htmlWithCss).toString("base64")}\n`
}\n------=_NextPart_01D50F22.CE126580--\n.`;
// 导出 mht 文件,再转换为 Word 格式
// 更多代码...
通过以上设置,应该可以成功解决 mht 导出 Word 中的字体大小变化问题。需要注意的是,这只适用于基本的图文混排场景。对于更复杂的富文本,可能还需要进行一些调整和改进。
这个问题可能与IT专家的知识没有直接关联,更像是富文本编辑器本身的问题。不过,可以尝试一些以下的方案: