使用 js 将 word 文档 docx 文件转为 html 呈现

时间：

分类：

tools

字数：

806 字

时长：

大约需要 4 分钟

次数：

0 人阅读

本文介绍 mammoth.js 工具转换 docx 文件为 html 内容。

本文发布时 mammoth.js 版本为 1.6.0。

mammoth.js github 地址：https://github.com/mwilliamson/mammoth.js

mammoth.js npm 地址：https://www.npmjs.com/package/mammoth

开源协议 BSD-2-Clause：BSD 2-Clause 允许许任何人进行个人使用、商业使用、复制、分发、修改，除了加上作者的版权信息，还必须保留免责声明，免去作者的一些责任（比如使用后果） 例如: 你在GitHub发布了一个AI换脸的项目, 别人clone后玩脱了跟你没关系.

使用方法

github 源码中没有打包后的 js 文件，需要自行拉取源码进行编译，如果嫌这种方式麻烦，可以考虑使用 npm 安装使用，这种方式需要有 nodejs webpack 这种打包工具。

由于本文编写时使用方式是针对浏览器环境，并没有使用类似 webpack 这种打包工具，所以先要找到编译后的 mammoth.js 文件地址。

mammoth.browser.min.js 下载地址：

  1. github release https://github.com/mwilliamson/mammoth.js/releases 有墙存在，不一定能成功下载。
  2. npm code 可以直接复制https://www.npmjs.com/package/mammoth?activeTab=code
  3. 淘宝镜像下载文件 https://npmmirror.com/package/mammoth/files/mammoth.browser.min.js?version=1.6.0

官方给的示例中直接传入文件地址方式需要在 nodejs 环境使用！！！

官方nodejs示例
1
2
3
4
5
6
7
8
9
10
11
mammoth.convertToHtml({
  path: './example.docx'
})
.then(function(result){
    var html = result.value; // The generated HTML
    var messages = result.messages; // Any messages, such as warnings during conversion
    document.getElementById(id).innerHTML = html
})
.catch(function(error) {
    console.error(error);
});

浏览器环境需要使用传入 arrayBuffer 方式，如下所示：

id 为 html 容器 id。

file 为 docx 文件地址。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function docxFileToHtml(options) {
  var file = options.file;
  var id = options.id;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', file, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    var arrayBuffer = xhr.response; // Note: not xhr.responseText
    mammoth.convertToHtml({
      arrayBuffer: arrayBuffer
    }, {
      styleMap: [
        'u => span.u'
      ]
    })
    .then(function(result){
      var html = result.value; // The generated HTML
      var messages = result.messages; // Any messages, such as warnings during conversion
      document.getElementById(id).innerHTML = html
    })
    .done();
  };
  xhr.send(null);
}
docxFileToHtml({
  id: 'pager',
  file: './example.docx'
})

如果觉得渲染效果不太满足，可以根据官方提供的 API 进行样式映射，如上所示的 styleMap 配置。

其他配置参考官方API文档https://npmmirror.com/package/mammoth/home?version=1.6.0#h-api-1

效果

以上效果源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="pager"></div>
  <script src="https://registry.npmmirror.com/mammoth/1.6.0/files/mammoth.browser.min.js"></script>
  <script>
    function docxFileToHtml(options) {
      var file = options.file;
      var id = options.id;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', file, true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function () {
        var arrayBuffer = xhr.response; // Note: not xhr.responseText
        mammoth.convertToHtml({
          arrayBuffer: arrayBuffer
        }, {
          styleMap: [
            'u => span.u'
          ]
        })
        .then(function(result){
          var html = result.value; // The generated HTML
          var messages = result.messages; // Any messages, such as warnings during conversion
          document.getElementById(id).innerHTML = html
        })
        .done();
      };
      xhr.send(null);
    }
    docxFileToHtml({
      id: 'pager',
      file: './example.docx'
    })
  </script>
</body>
</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-17/word-to-html/

如果您觉得文章不错，可以点击文章中的广告支持一下！