WORD文档转换成HTML

背景

最近接到一个需求，将word文档，转换成网页中能直接使用的帮助文档。网上有很多的工具可以将WORD（.docx）文档转成HTML文件，最简单的方式就是文件另存为 .html 的文件。

直接另存为存在以下缺陷：

1. 冗余信息过多，部分需要手动处理；
2. 不能进修拓展操作（例如：重新配置样式主题；不能进行导航配置）；
3. 图片资源文件的额外处理

解决思路

有很多开源的工具可以处理word文档，支持各种语言，本文使用 Node.js（身为前端当然的啦）来解决。
为了增加前端展示时的灵活性，基本思路就是：
.docx => HTML => JSON => React/Vue

1. 先将word 文档转化成 HTML/XML 格式；
2. 再将HTML/XML 转化成 需要JSON 格式；
3. 依据JSON 再使用 React/Vue等进行展示。

具体方案

word 文档（.docx）转化成 HTML/XML 格式；

基础环境依赖 node.js + [email protected]
mammoth.js的基本用法参考官方文档，这里主要提几个注意事项,官方快速使用方法如下：

var mammoth = require("mammoth");

mammoth.convertToHtml({path: "path/to/document.docx"})
    .then(function(result){
        var html = result.value; // The generated HTML
        var messages = result.messages; // Any messages, such as warnings during conversion
    })
    .done();

我这里使用的是 buffer 模式，代码如下：

const fs = require("fs");
const path = require("path");
const mammoth = require("mammoth");


const options = {
   styleMap: [
    "p[style-name='标题1'] => p.h1:fresh",
    "p[style-name='标题2‘] => p.h2:fresh",
    "p[style-name='段落‘] => p.content:fresh",
  ],
}

const doc = fs.readFileSync(path.resolve(__dirname, 'a.docx'))
mammoth
    .convertToHtml({ buffer : doc}, options)
    .then((result) => {
       var html = result.value; 
        var messages = result.messages; 
    })
    .done();

处理后的结果：

<p class="h1">标题</p><p class="h2">次级标题<p/><p class="content">段落内容</p>

1. style-name

这里需要注意的是 标题1 标题2… 来自于 Word 的样式（默认样式/自定义样式），标题1 标题2 就是你的样式名，如果你Word 文件没有样式名，在处理前，需要用 格式刷 预处理文件。

2.插图处理

如果 options 没有声明 convertImage 的处理插图会 默认转成 src 为 base64 的数据。

3.数学公式处理
因为 mammoth 不支持 公式处理，所以需要自己处理数学公式，最简单的方式，就是将公式转换成图片；我这里使用的方法为 docx 转doc （Word2003）；再转回 docx。

HTML 转化JSON 格式

依赖 htmlparser2

const fs = require("fs");
const path = require("path");
const mammoth = require("mammoth");
const htmlparser2 = require("htmlparser2");

const options = {
   styleMap: [
    "p[style-name='标题1'] => p.h1:fresh",
    "p[style-name='标题2‘] => p.h2:fresh",
    "p[style-name='段落‘] => p.content:fresh",
  ],
}

const doc = fs.readFileSync(path.resolve(__dirname, 'a.docx'))
mammoth
    .convertToHtml({ buffer : doc}, options)
    .then((result) => {
        let html = result.value; 
        let messages = result.messages; 
        let parser = new htmlparser2.parseDOM(result.value)
      
    })
    .done();

parser为JSON 格式的Dom分解，根据结构你可以修改 “attribs”，例如：
attribs:{class:‘h1’}添加id
{attribs:{class:‘h1’,id:‘top’}}便于后续展示前端可以根据id 来进行锚点定位

JSON 使用 React/Vue渲染

上一步 根据需求 处理后 parser 就能得到需要的JSON格式，进行存储，最终读取JSON数据，便利展示即可。