HTML
和 word
的互转功能一直是开发中的一个头疼需求。那么今天咱们就针对这个需求来看下,如何进行角色。
这里涉及到两个关键的 js 库
:
html-docx-js 是一个非常小的库,能够将 HTML 文档转换为 Microsoft Word 2007 及更高版本使用的 DOCX 格式。html-docx-js 设法使用称为“altchunks”的功能在浏览器中执行转换。
简而言之,它允许以不同的标记语言嵌入内容。开发者使用 MHT 文档将嵌入内容发送到 Word,因为它允许处理图像。Word 打开此类文件后,会将外部内容转换为 Word Processing ML(这是 DOCX 文件的标记语言的调用方式)并替换引用。
Microsoft Word for Mac 2008 不支持 Altchunk,LibreOffice 和 Google Docs 也不支持 Altchunk。
关于 html-docx-js 库有几点需要说明:
目前 Mammoth 在 Github 上通过 MIT 协议开源,有超过 1k 的 star、0.3k 的 fork、0.7k 的项目依赖量、NPM 周平均下载量 9k,是一个值得关注的前端开源项目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");
asBlob 可以采用其他选项来控制文档的页面设置:
比如下面的例子:
var converted = htmlDocx.asBlob(content, {
orientation: "landscape",
margins: { top: 720 },
});
saveAs(converted, "test.docx");
需要注意的是,开发者需要传递完整、有效的 HTML(包括 DOCTYPE、html 和 body 标签)。这可能不太方便,但可以让开发者在样式标签中包含 CSS 规则。
html-docx-js 作为独立”Browserify 模块(UMD)分发。开发者可以将其作为 html-docx 要求。如果没有可用的模块加载器,它将把自己注册在 window.htmlDocx。
Mammoth.js 旨 在转换 .docx 文档,例如:由 Microsoft Word、Google Docs 和 LibreOffice 创建的文档,并将其转换为 HTML。
Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单且干净的 HTML。例如,Mammoth 将任何具有标题 1 样式的段落转换为 h1 元素,而不是尝试精确复制标题的样式(字体、文本大小、颜色等)。
.docx 使用的结构与 HTML 的结构之间存在很大的不匹配,这意味着对于更复杂的文档来说,转换不太可能完美。如果开发者仅使用样式来对文档进行语义标记,那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能:
Mammoth 在众多平台可用,比如:Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通过 BSD-2-Clause 开源,有超过 4.1k 的 star、0.5k 的 fork、4.4k 的项目依赖量、NPM 周平均下载量 76k,是一个值得关注的前端优质开源项目。
以文档转换为例。
Mammoth 允许在转换文档之前对其进行处理。例如,假设该文档尚未进行语义标记,但开发者知道任何居中对齐的段落都应该是标题,则可以使用 transformDocument 参数来适当地修改文档:
function transformElement(element) {
if (element.children) {
var children = _.map(element.children, transformElement);
element = { ...element, children: children };
}
if (element.type === "paragraph") {
element = transformParagraph(element);
}
return element;
}
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: transformElement,
};
TransformDocument 的返回值在 HTML 生成期间使用。同时,上面的代码可以使用 mammoth.transforms.paragraph 函数进行优化,比如:
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
};
或者,如果开发者希望已明确设置为使用等宽字体来表示代码的段落:
const monospaceFonts = ["consolas", "courier", "courier new"];
function transformParagraph(paragraph) {
var runs = mammoth.transforms.getDescendantsOfType(paragraph, "run");
var isMatch =
runs.length > 0 &&
runs.every(function (run) {
return run.font && monospaceFonts.indexOf(run.font.toLowerCase()) !== -1;
});
if (isMatch) {
return {
...paragraph,
styleId: "code",
styleName: "Code",
};
} else {
return paragraph;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
styleMap: ["p[style-name='Code'] => pre:separator('\n')"],
};