likes
comments
collection
share

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

作者站长头像
站长
· 阅读数 51

前情

在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法务给我们一个word的文档，最开始的时候因为没有什么基建，都是一行一行去复制通过标签包裹，效率及其低下，于是想开发一个工具可以直接生成html。

在线体验链接

实践

怎样可以将word转换成html？

发现Mammoth.js非常符合我们的场景

Mammoth.js特点：

  • 专注于简洁的 HTML 输出，不包含多余的样式。
  • 支持自定义样式转换。
  • 适合需要干净的、结构化的 HTML 的场景。

因为生成协议其中的样式并不需要很多，越简单的越好，对于特定的样式只需要我们来自定义一下即可。

convertToHtml

来看看我们要使用的主要api

mammoth.convertToHtml(input, options) 将源文档转换为 HTML。

input ：描述源文档的对象； 支持以下输出

{path: path}，其中 path 是 .docx 文件的路径。 {buffer: buffer} ，其中 buffer 是包含 .docx 文件的 node.js 缓冲区。

options （可选）：转换选项。有如下属性（只放了本篇文章会运用到的属性，详情可看文档）

styleMap ：控制Word样式到HTML的映射。 transformDocument ：如果设置，此功能将应用于在转换为 HTML 之前从 docx 文件读取的文档。

以这个word模板为例，我们来尝试转换一下

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

安装依赖

yarn add mammoth -D

// test.js
import mammoth from 'mammoth'
import fs from 'fs'

mammoth.convertToHtml({path: "测试模板协议.docx"}).then(function(result){
  const html = result.value
  console.log(html)
  fs.writeFileSync('./output.html', html, 'utf8')
}).catch(function(err){
  console.log(err)
})

上面test.js就是我们需要通过node执行的脚本，在对应目录下的控制台中执行node test即可

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法 转换成成功了！！！

我们通过浏览器打开对应输出的output.html，看看和word文档有没有什么区别？

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

发现其中标题的居中对齐和日期的居右对齐的样式没有生效，那么我们针对这两种情况处理一下

那具体怎么处理呢？

我们可以在遍历每个段落的时候，获取其对齐的样式进行自定义配置，其中option中的transformDocument属性可以帮助我们遍历段落进行一些样式操作。

const options = {
  transformDocument: mammoth.transforms.paragraph(transformParagraph)
};
function transformParagraph(paragraph) {
  let styleName = "";
  if (paragraph.alignment === "center") {
    styleName = "text-center";
  } else if (paragraph.alignment === "right") {
    styleName = "text-right";
  }
  
  return {
      ...paragraph,
      styleName
  };
}
mammoth.convertToHtml({path: "测试模板协议.docx"}, options).then(function(result){
  const html = result.value
  fs.writeFileSync('./output.html', html, 'utf8')
}).catch(function(err){
  console.log(err)
})

其中的paragraph代表 段落对象，我们可以通过 段落对象 的属性 alignment 获取到文本的对齐方式，然后我们只需要给对应的段落对象设置styleName值就行了。看看效果

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

为什么没生效？

因为我们没有将其对应的style映射到html中，我们来增加映射

const options = {
  styleMap: [
    "p[style-name='text-center'] => p.text-center:fresh",
    "p[style-name='text-right'] => p.text-right:fresh"
  ],
  transformDocument: mammoth.transforms.paragraph(transformParagraph)
};

styleMap会根据stylename的值映射成类到html中

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

哇，成功了！！！ 接下来只需要给对应的类加样式即可，这里不赘述

回归正题，一般这种协议政策的内容我们会放在 pc 或者 mobile 访问，所以我们可以设置一个html模板，其中包含了一些base.css和简单适配的样式以及你想自定义的样式，这是我写的简单的模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
      html {background: white;color:black;height: 100%;}
      body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        margin:0;padding:0;
      }
      body{padding:20px;line-height: 2; max-width: 1200px;margin: 0 auto;}
      h1{font-size:24px;font-weight: bold;}
      h2{font-size:20px;font-weight: bold;}
      h3{font-size:16px;font-weight: bold;}
      h4{font-size:16px;padding:10px 0;}
      ol,ul {list-style:none;}
      ol,ul,p,table{font-size:14px;}
      i{font-style: normal;}
      a:hover {text-decoration:none;}
      a,dt{-webkit-tap-highlight-color: transparent;-webkit-tap-highlight-color: transparent;}
      a:active {text-decoration:none;-webkit-tap-highlight-color: transparent;-webkit-tap-highlight-color: transparent;}
      ins,a {text-decoration:none;}
      .text-center{text-align: center;}
      .text-right{text-align: right;}
    </style>
  </head>
  <body></body>
</html>

到时候只需要将转换的html插入到body标签即可。

效果

我们来将最终转换后的html插入到上述的模板中，看看最终在pc和mobile的效果，看起来没什么大问题

一分钟教你word转html前情 在公司开发一些业务的时候会涉及到一些协议政策需要通过页面来展示，这些协议政策一般都是法

完整代码

import mammoth from 'mammoth'
import fs from 'fs'

const options = {
  styleMap: [
    "p[style-name='text-center'] => p.text-center:fresh",
    "p[style-name='text-right'] => p.text-right:fresh"
  ],
  transformDocument: mammoth.transforms.paragraph(transformParagraph)
};

function transformParagraph(paragraph) {
  let styleName = "";
  
  if (paragraph.alignment === "center") {
    styleName = "text-center";
  } else if (paragraph.alignment === "right") {
    styleName = "text-right";
  }
  
  return {
      ...paragraph,
      styleName
  };
}

mammoth.convertToHtml({ path: "测试模板协议.docx" }, options).then(function(result){
  const html = result.value;
  const tempHtml = fs.readFileSync('./temp.html', 'utf8')
  const insertTag = '<body>'
  const insertIndex = tempHtml.lastIndexOf(insertTag) + insertTag.length
  const resHtml = tempHtml.slice(0, insertIndex) + html + tempHtml.slice(insertIndex)
  fs.writeFileSync('./output.html', resHtml, 'utf8')
}).catch(function(err){
  console.log(err);
});

在线体验链接：www.janus-c.top/project/wor…

github仓库：github.com/zhan-hc/wor…

转载自:https://juejin.cn/post/7384611550386552895
评论
请登录