把 Word文档转为移动端友好的 HTML5格式文档从未如此轻松

的：

疫情条件下，您是否有每天刷新一下新冠疫情的最新进展？事实上，手机阅读获得动态更新的知识和消息已经成为主流。如果您期望您产品和相关文档的客户（用户）也可以及时，高效获得HTML5互联网阅读的体验，那么本文描述的 TEAMWISE Publisher 的 Word 转换 HTML5 服务可以帮助您。

TEAMWISE PUBLISHER 发布器

特征：

TEAMWISE Publisher 电子出版：快速简单

在 Word 转换前，如下图示

转换后, 如下图示:

在 Word 转换前，如下图示

转换后, 如下图示:

在 Word 转换前（高级版），如下图示

转换后（高级版）, 如下图示:

TEAMWISE PUBLISHER 电子出版：负担得起

2020年6/24日-2020年7/24日, 有格式的 Word 文档不限量转换，免费提供6个H5皮肤样式（可以定制 LOGO, 公司页脚和颜色）仅需人民币2000元/月免费提供云端上线（不加密，不承诺永久保存数据）。

好处：

WORD /PDF 无法提供流畅的阅读体验；对于大文档， PDF 加载极其痛苦；
WORD/PDF 也不适应移动端的当前主流阅读习惯；
使用TEAMWISE Publisher 转换器创建的HTML5文档具有专业，优雅和华丽的外观，就像打印版本一样。

价值：

如果您真正以客户为中心，那么现在是时候把Word文档转换为HTML5，因为客户和用户都在习惯互联网阅读带来的舒适体验。

关于我们

北京镭内容技术公司成立于2019年，其前身是2014年成立的上海迪臣信息科技有限公司。本公司使命是通过人工智能技术为企业内容实践不断赋能。

公司定位是解决内容 ”写、管、用“三个方面的挑战。

为此我们与知名的Oxygen产品厂家罗马尼亚 SyncSoft 公司，比利时 InfoMapping 国际公司等结成合作伙伴并代理销售：Oxygen XML 产品系列，FS Pro Word 产品等。与此同时，我们研发、交付和销售 AI 技术产品，如机器翻译 TEAMWISE 等。

基于 AI 行业的挑战，我们也被主要的 AI 技术公司委托提供高性价比人工翻译服务。

产品和服务咨询，请联系我们：

家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是HTML5 和word的互相转化，话不多说，直接进入正题！

1.HTML转化为Word之 html-docx-js

1.1 什么是 html-docx-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 库有几点需要说明：

html-docx-js 适用于任何支持 Blob 的现代浏览器（无论是本机还是通过 Blob.js）。它在 Google Chrome 36、Safari 7 和 Internet Explorer 10 上进行了测试，也适用于使用 Buffer 而不是 Blob 的 Node.js（在 v0.10.12 上测试）。
html-docx-js 仅支持内联的 base64 图像（通过 DATA URI 获取）。但动态转换常规图像（来自静态文件夹）很容易，开发者可以自行完成。

目前 Mammoth 在 Github 上通过 MIT 协议开源，有超过 1k 的 star、0.3k 的 fork、0.7k 的项目依赖量、NPM 周平均下载量 9k，是一个值得关注的前端开源项目。

1.2 如何使用 html-docx-js

var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");

asBlob 可以采用其他选项来控制文档的页面设置：

orientation：横向或纵向（默认）
margins：边距大小图
top：数字（默认：1440，即 2.54 厘米）
right：数字（默认：1440）
bottom：数字（默认：1440）
left：数字（默认：1440）
header：数字（默认值：720）
footer：数字（默认值：720）
gutter：数字（默认值：0）

比如下面的例子：

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。

2.mammoth.js

2.1 什么是 mammoth.js

Mammoth.js 旨在转换 .docx 文档，例如：由 Microsoft Word、Google Docs 和 LibreOffice 创建的文档，并将其转换为 HTML。 Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单且干净的 HTML。例如，Mammoth 将任何具有标题 1 样式的段落转换为 h1 元素，而不是尝试精确复制标题的样式（字体、文本大小、颜色等）。

.docx 使用的结构与 HTML 的结构之间存在很大的不匹配，这意味着对于更复杂的文档来说，转换不太可能完美。如果开发者仅使用样式来对文档进行语义标记，那么 Mammoth 效果最佳。

Mammoth.js 目前支持以下功能：

标题、列表、评论
从自己的 docx 样式到 HTML 的可定制映射。例如，可以通过提供适当的样式映射将 warningHeading 转换为 h1.warning。
Tables：当前忽略表格本身的格式（例如：边框），但文本的格式与文档其余部分的格式相同。
脚注和尾注、图片、粗体、斜体、下划线、删除线、上标和下标、链接、Line、Line breaks
文本框：文本框的内容被视为出现在包含文本框的段落之后的单独段落。

Mammoth 在众多平台可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通过 BSD-2-Clause 开源，有超过 4.1k 的 star、0.5k 的 fork、4.4k 的项目依赖量、NPM 周平均下载量 76k，是一个值得关注的前端优质开源项目。

2.2 使用 mammoth.js

以文档转换为例。

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')"],
};

关于 Mammoth 库的更多用法，更多 API 示例可以参考文末资料，本文不再过多展开。

3.本文总结

本文主要和大家介绍 HTML5 和word互转的两个开源库，分别为：html-docx-js、mammoth.js。相信通过本文的阅读，大家对 html-docx-js、mammoth.js 会有一个初步的了解。

因为篇幅有限，关于 html-docx-js、mammoth.js 的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://github.com/evidenceprime/html-docx-js

https://github.com/mwilliamson/mammoth.js

https://www.npmjs.com/package/html-docx-js

https://www.npmjs.com/package/mammoth

https://www.tutorialswebsite.com/export-html-to-word-document-with-javascript/

https://www.vecteezy.com/vector-art/136754-free-vector-documents

持word上传的富文本编辑器，web编辑器，HTML编辑器，前端编辑器。编辑器网上搜了一下，比较多，

前端用了VUE2,VUE3，React，HTML5，也是一个新项目，为了方便用的这些框架，实际上这个是无所谓，功能的实现和前端这些框架没什么关系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能实现和后端用的什么开发语言无关，后端只提供一个文件上传的接口，HTTP form协议，图片上传时会调这个接口。

编辑器是ckeditor5，为ckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），支持多种系统：Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信，龙芯。

支持word粘贴，word内容粘贴,word图文粘贴,word图片粘贴，粘贴后图片能够自动上传到服务器中，然后将图片和内容HTML添加到编辑器中，上传接口地址能够自定义

示例项目：https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.为ckeditor增加插件按钮

1.下载ckeditor5源码，注意：不是在npm中直接安装ckeditor5，在npm中直接安装的ckeditor5是已经打包好的编辑器，我们无法为其添加插件，必须下载源码添加好后再手动打包。

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build-classic

2.添加插件文件

将plugin下的插件复制到ckeditor5的目录中

导入插件

在ckeditor.js中导入插件

3.添加插件

添加到工具栏

# 构建，生成ckeditor.js，生成的ckeditor.js在build目录下

yarn build

执行命令后生成ckeditor.js

将打包好的ckeditor.js复制到项目中

2.复制layer,wordpaster目录,安装jquery

#通过命令安装jquery

npm install jquery

3.在组件中导入样式

代码：

import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’

import ‘../../static/WordPaster/js/w.css’

import ‘../../static/layer-v3.1.1/layer/layer’

import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’

4.初始化wordpaster组件

配置posturl,

代码：

//初始化

WordPaster.getInstance({

PostUrl:”http://localhost:8891/upload.aspx”,

ImageUrl:”http://localhost:8891{url}”

}).Load();

整合效果：

在线咨询

上一篇：css篇二 css选择器
下一篇：HTML 脚本

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商