整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家好，很高興又見面了，我是"高級前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動力。
今天給大家?guī)淼闹黝}是HTML5 和word的互相轉(zhuǎn)化，話不多說，直接進(jìn)入正題！
html-docx-js 是一個非常小的庫，能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。 簡而言之，它允許以不同的標(biāo)記語言嵌入內(nèi)容。 開發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word，因為它允許處理圖像。 Word 打開此類文件后，會將外部內(nèi)容轉(zhuǎn)換為 Word Processing ML（這是 DOCX 文件的標(biāo)記語言的調(diào)用方式）并替換引用。
Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。
關(guān)于 html-docx-js 庫有幾點需要說明：
目前 Mammoth 在 Github 上通過 MIT 協(xié)議開源，有超過 1k 的 star、0.3k 的 fork、0.7k 的項目依賴量、NPM 周平均下載量 9k，是一個值得關(guān)注的前端開源項目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");asBlob 可以采用其他選項來控制文檔的頁面設(shè)置：
比如下面的例子：
var converted = htmlDocx.asBlob(content, {
orientation: "landscape",
margins: { top: 720 },
});
saveAs(converted, "test.docx");需要注意的是，開發(fā)者需要傳遞完整、有效的 HTML（包括 DOCTYPE、html 和 body 標(biāo)簽）。 這可能不太方便，但可以讓開發(fā)者在樣式標(biāo)簽中包含 CSS 規(guī)則。
html-docx-js 作為獨立”Browserify 模塊（UMD）分發(fā)。 開發(fā)者可以將其作為 html-docx 要求。 如果沒有可用的模塊加載器，它將把自己注冊在 window.htmlDocx。
Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔，并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標(biāo)是通過使用文檔中的語義信息并忽略其他細(xì)節(jié)來生成簡單且干凈的 HTML。 例如，Mammoth 將任何具有標(biāo)題 1 樣式的段落轉(zhuǎn)換為 h1 元素，而不是嘗試精確復(fù)制標(biāo)題的樣式（字體、文本大小、顏色等）。
.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配，這意味著對于更復(fù)雜的文檔來說，轉(zhuǎn)換不太可能完美。 如果開發(fā)者僅使用樣式來對文檔進(jìn)行語義標(biāo)記，那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能：
Mammoth 在眾多平臺可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過 BSD-2-Clause 開源，有超過 4.1k 的 star、0.5k 的 fork、4.4k 的項目依賴量、NPM 周平均下載量 76k，是一個值得關(guān)注的前端優(yōu)質(zhì)開源項目。
以文檔轉(zhuǎn)換為例。
Mammoth 允許在轉(zhuǎn)換文檔之前對其進(jìn)行處理。 例如，假設(shè)該文檔尚未進(jìn)行語義標(biāo)記，但開發(fā)者知道任何居中對齊的段落都應(yīng)該是標(biāo)題，則可以使用 transformDocument 參數(shù)來適當(dāng)?shù)匦薷奈臋n：
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 函數(shù)進(jìn)行優(yōu)化，比如：
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return { ...element, styleId: "Heading2" };
} else {
return element;
}
}
var options = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
};或者，如果開發(fā)者希望已明確設(shè)置為使用等寬字體來表示代碼的段落：
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')"],
};關(guān)于 Mammoth 庫的更多用法，更多 API 示例可以參考文末資料，本文不再過多展開。
本文主要和大家介紹 HTML5 和word互轉(zhuǎn)的兩個開源庫，分別為：html-docx-js、mammoth.js。相信通過本文的閱讀，大家對 html-docx-js、mammoth.js 會有一個初步的了解。
因為篇幅有限，關(guān)于 html-docx-js、mammoth.js 的更多用法和特性文章并沒有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時文末的參考資料提供了大量優(yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點贊、評論、轉(zhuǎn)發(fā)、收藏，您的支持是我不斷創(chuàng)作的動力。
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
全球旅行網(wǎng)站HTML5模板是一款適合重新旅游行業(yè)服務(wù)網(wǎng)站模板下載。提示：本模板調(diào)用到谷歌字體庫，可能會出現(xiàn)頁面打開比較緩慢。
下載鏈接：
地址：https://yy123.ink/mobanDetail/21507
TML5 代表未來;W3C ( World Wide Web Consortium, 萬維網(wǎng)聯(lián)盟) 已經(jīng)放棄 XHTML，從而使 HTML5 成為正式標(biāo)準(zhǔn)并得到認(rèn)可。
HTML5 是下一代的 HTML。
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，目標(biāo)是取代現(xiàn)有的HTML4.01和XHTML1.0標(biāo)準(zhǔn)。它希望能夠減少互聯(lián)網(wǎng)富應(yīng)用(RIA)對Flash、Silverlight、JavaFX等的依賴，并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的API。
HTML 的上一個版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
HTML5 是 W3C 與 WHATWG 合作的結(jié)果。
WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個新版本的 HTML。
為 HTML5 建立的一些規(guī)則：
新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
減少對外部插件的需求(比如 Flash)
更優(yōu)秀的錯誤處理
更多取代腳本的標(biāo)記
HTML5 應(yīng)該獨立于設(shè)備
開發(fā)進(jìn)程應(yīng)對公眾透明
最簡單的 HTML5 文檔
<!doctype html>
<title>A Tiny HTML Document</title>
<p>Let's rock the browser, HTML5 style.</p>
只包含一行文本的超簡單的 HTML5 文檔，它在瀏覽器中效果如下：
更常見的結(jié)構(gòu)用<head>和<body>來分塊，把頁面的信息和頁面的實際內(nèi)容分開，并用<html>來封裝整個文檔，現(xiàn)在的文檔樣子如下：
<!doctype html>
<html>
<head>
<title>A Tiny HTML Document</title>
</head>
<body>
<p>Let's rock the browser, HTML5 style.</p>
</body>
</html>
<html>、<head>和<body><HTML5 >不要求這些元素，但是這種書寫風(fēng)格比較好。
<!doctype html>
第一行都必須是一個特定的文檔類型聲明，用于告訴后面的文檔標(biāo)記遵循哪個標(biāo)準(zhǔn)。HTML5 的文檔類型聲明極其簡單。
字符編碼
現(xiàn)在大部分網(wǎng)站都使用 UTF-8 的編碼，這種編碼簡潔、轉(zhuǎn)換速度快，而且支持任何你想要的非英文字符。
在 HTML5 中增加字符編碼信息很簡單，在 <head>中增加 <meta>元素，如下：
<head>
<meta charset="utf-8">
<title>A Tiny HTML Document</title>
</head>
Dreamweaver 設(shè)計工具在創(chuàng)建新的網(wǎng)頁時會自動添加這個元信息，并且也會將文件保存為 UTF 編碼格式。如果你使用的是最簡單的文本編輯器，在保存的時候記得選擇正確的編碼(UTF-8)。
頁面語言
指明網(wǎng)頁中使用的自然語言是一種好的習(xí)慣。為給內(nèi)容指定語言，可在任何元素上使用 lang 屬性。
為整個頁面添加語言說明，就是為 元素指定 lang 屬性，如下代碼：
<html>
如果頁面包含多種語言的文本，那么這個信息細(xì)節(jié)對于屏幕閱讀器也是很有用的。
添加樣式表
只要是經(jīng)過特意設(shè)計的專業(yè)網(wǎng)站，就一定會使用樣式表。指定要使用的 CSS 樣式表時，需要在 <head>中增加 <link>元素，如下：
<head>
<meta charset="utf-8">
<title>A Tiny HTML Document</title>
<link rel="stylesheet" href="TinyHTML5.css">
</head>
添加 JavaScript
在 HTML5 中添加 JavaScript 與在傳統(tǒng)頁面上添加差不多，例如：
<head>
<meta charset="utf-8">
<title>A Tiny HTML Document</title>
<link rel="stylesheet" href="TinyHTML5.css">
<script src="TinyHTML5.js"></script>
</head>
沒有必要添加 language=”JavaScript”屬性。瀏覽器假定你要使用的 JavaScript。
特別注意：
如果你要在 IE 中花大量時間測試包含 JavaScript 的頁面，還應(yīng)該增加一個特殊的注釋，叫Web標(biāo)志(saved from url=)，這行注釋要放在指定字符編碼元素的后面，如下：
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>A Tiny HTML Document</title>
這條注釋告訴 IE 將頁面視為從遠(yuǎn)程網(wǎng)站上下載下來的，否則，IE 會切換到一種特殊鎖定模式，彈出一條安全警告，在你點了“允許阻止的內(nèi)容”按鈕之后才會執(zhí)行 JavaScript 代碼。
(0014) 指的是 about:internet 字符串的長度。
最終結(jié)果
一個完整美觀的 HTML5 代碼最終如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>A Tiny HTML Document</title>
<link rel="stylesheet" href="TinyHTML5.css">
<script src="TinyHTML5.js"></script>
</head>
<body>
<p>Let's rock the browser, HTML5 style.</p>
</body>
</html>
微信搜索公眾號華清遠(yuǎn)見成都中心（cdfarsight），回復(fù)免費資料，免費領(lǐng)取嵌入式、Java、HTML5/WEB前端開發(fā)書籍！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
