把 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小時內與您取得聯系。

整合營銷服務商