整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，很高興又見(jiàn)面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。
今天給大家?guī)?lái)的主題是HTML5 和word的互相轉(zhuǎn)化，話不多說(shuō)，直接進(jìn)入正題！
html-docx-js 是一個(gè)非常小的庫(kù)，能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。 簡(jiǎn)而言之，它允許以不同的標(biāo)記語(yǔ)言嵌入內(nèi)容。 開發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word，因?yàn)樗试S處理圖像。 Word 打開此類文件后，會(huì)將外部?jī)?nèi)容轉(zhuǎn)換為 Word Processing ML（這是 DOCX 文件的標(biāo)記語(yǔ)言的調(diào)用方式）并替換引用。
Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。
關(guān)于 html-docx-js 庫(kù)有幾點(diǎn)需要說(shuō)明：
目前 Mammoth 在 Github 上通過(guò) MIT 協(xié)議開源，有超過(guò) 1k 的 star、0.3k 的 fork、0.7k 的項(xiàng)目依賴量、NPM 周平均下載量 9k，是一個(gè)值得關(guān)注的前端開源項(xiàng)目。
var converted = htmlDocx.asBlob(content);
saveAs(converted, "test.docx");asBlob 可以采用其他選項(xiàng)來(lái)控制文檔的頁(yè)面設(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 作為獨(dú)立”Browserify 模塊（UMD）分發(fā)。 開發(fā)者可以將其作為 html-docx 要求。 如果沒(méi)有可用的模塊加載器，它將把自己注冊(cè)在 window.htmlDocx。
Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔，并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標(biāo)是通過(guò)使用文檔中的語(yǔ)義信息并忽略其他細(xì)節(jié)來(lái)生成簡(jiǎn)單且干凈的 HTML。 例如，Mammoth 將任何具有標(biāo)題 1 樣式的段落轉(zhuǎn)換為 h1 元素，而不是嘗試精確復(fù)制標(biāo)題的樣式（字體、文本大小、顏色等）。
.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配，這意味著對(duì)于更復(fù)雜的文檔來(lái)說(shuō)，轉(zhuǎn)換不太可能完美。 如果開發(fā)者僅使用樣式來(lái)對(duì)文檔進(jìn)行語(yǔ)義標(biāo)記，那么 Mammoth 效果最佳。
Mammoth.js 目前支持以下功能：
Mammoth 在眾多平臺(tái)可用，比如：Python、WordPress、Java/JVM、.NET 等等。目前 Mammoth 在 Github 上通過(guò) BSD-2-Clause 開源，有超過(guò) 4.1k 的 star、0.5k 的 fork、4.4k 的項(xiàng)目依賴量、NPM 周平均下載量 76k，是一個(gè)值得關(guān)注的前端優(yōu)質(zhì)開源項(xiàng)目。
以文檔轉(zhuǎn)換為例。
Mammoth 允許在轉(zhuǎn)換文檔之前對(duì)其進(jìn)行處理。 例如，假設(shè)該文檔尚未進(jìn)行語(yǔ)義標(biāo)記，但開發(fā)者知道任何居中對(duì)齊的段落都應(yīng)該是標(biāo)題，則可以使用 transformDocument 參數(shù)來(lái)適當(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 生成期間使用。同時(shí)，上面的代碼可以使用 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è)置為使用等寬字體來(lái)表示代碼的段落：
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 庫(kù)的更多用法，更多 API 示例可以參考文末資料，本文不再過(guò)多展開。
本文主要和大家介紹 HTML5 和word互轉(zhuǎn)的兩個(gè)開源庫(kù)，分別為：html-docx-js、mammoth.js。相信通過(guò)本文的閱讀，大家對(duì) html-docx-js、mammoth.js 會(huì)有一個(gè)初步的了解。
因?yàn)槠邢蓿P(guān)于 html-docx-js、mammoth.js 的更多用法和特性文章并沒(méi)有過(guò)多展開，如果有興趣，可以在我的主頁(yè)繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量?jī)?yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏，您的支持是我不斷創(chuàng)作的動(dò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
TML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。
HTML5 簡(jiǎn)單易學(xué)。
HTML5 是下一代 HTML 標(biāo)準(zhǔn)。
HTML , HTML 4.01的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
HTML5 是 W3C 與 WHATWG 合作的結(jié)果,WHATWG 指 Web Hypertext Application Technology Working Group。。
WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對(duì)本地離線存儲(chǔ)的更好的支持
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡(jiǎn)單
下面是一個(gè)簡(jiǎn)單的HTML5文檔：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文檔標(biāo)題</title></head><body>文檔內(nèi)容......</body></html>
HTML5 的改進(jìn)
新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 制圖
本地存儲(chǔ)
本地 SQL 數(shù)據(jù)
Web 應(yīng)用
HTML5 多媒體
使用 HTML5 你可以簡(jiǎn)單的在網(wǎng)頁(yè)中播放 視頻(video)與音頻 (audio) 。
HTML5 <video>
HTML5 <audio>
HTML5 應(yīng)用
使用 HTML5 你可以簡(jiǎn)單地開發(fā)應(yīng)用
本地?cái)?shù)據(jù)存儲(chǔ)
訪問(wèn)本地文件
本地 SQL 數(shù)據(jù)
緩存引用
Javascript 工作者
XHTMLHttpRequest 2
HTML5 圖形
使用 HTML5 你可以簡(jiǎn)單的繪制圖形:
使用 <canvas> 元素。
使用內(nèi)聯(lián) SVG。
使用 CSS3 2D 轉(zhuǎn)換、CSS3 3D 轉(zhuǎn)換。
HTML5 使用 CSS3
新選擇器
新屬性
動(dòng)畫
2D/3D 轉(zhuǎn)換
圓角
陰影效果
可下載的字體
了解更多CSS3知識(shí)請(qǐng)查看本站的 CSS3 教程。
HTML5 表單
新表單元素, 新屬性，新輸入類型，自動(dòng)驗(yàn)證。
已移除元素
以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
果圖
各位長(zhǎng)友大家好！
今天給大家分享的是
用HTML5實(shí)現(xiàn)字體噴發(fā)特效源碼
廢話不多說(shuō)，上源碼
function init() {
var emitter = document.getElementById("emitter"),
container = document.createElement("div"),
emitterSize = 100,
dotQuantity = 50,
dotSizeMax = 100,
dotSizeMin = 10,
speed = 1,
gravity = 1;
container.setAttribute("id", "emit-wrap");
//setup the container with the appropriate styles
container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
document.body.appendChild(container);
function createExplosion(container) {
var tl = new TimelineLite({
onComplete: function() {
$('#emit-wrap').remove();
}
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
