天推薦的這個項目是「KLineChart」，可以高度自定義的輕量級 K 線圖。

KLineChart 基于 html5 canvas 構(gòu)建，默認支持幾十種技術(shù)指標、多種圖形標記且可自行擴展，默認支持多種畫圖模型且可自行擴展，無任何第三方依賴，支持移動端。

KLineChart 功能集

• 支持樣式修改 (包括各種文字和線，主圖類型，坐標軸類型及位置等等)
• 支持設(shè)置價格和數(shù)量精度
• 支持時區(qū)設(shè)置
• 支持縮放比例設(shè)置
• 支持禁止?jié)L動和縮放
• 支持分段加載歷史數(shù)據(jù)和實時更新
• 技術(shù)指標
• 內(nèi)置幾十種技術(shù)指標
• 支持主圖設(shè)置多個技術(shù)指標類型
• 支持單獨窗口展示 (理論上可以創(chuàng)建無數(shù)個窗口)
• 支持為窗口設(shè)置技術(shù)指標類型
• 支持為單個技術(shù)指標設(shè)置精度、樣式和計算參數(shù)
• 支持自定義且能夠自行繪制
• 圖形標記
• 內(nèi)置多種圖形
• 支持根據(jù)鼠標動作去一步步地完成繪制
• 支持一步創(chuàng)建一個完整的圖形
• 支持單獨設(shè)置樣式
• 支持自定義
• 支持圖表動作監(jiān)聽
• 支持圖表生成圖片導(dǎo)出

快速開始

1、安裝

• 使用 npmnpm install klinecharts --save
• 使用 yarnyarn add klinecharts

2、引入

// 全量引入，包含所有內(nèi)置的技術(shù)指標和繪圖標記
import { init } from 'klinecharts'
// 引入部分功能，不包含內(nèi)置的繪圖標記
import { init } from 'klinecharts/index.blank'
// 引入基礎(chǔ)功能，不包含內(nèi)置的技術(shù)指標和繪圖標記
import { init } from 'klinecharts/index.simple'
// 以上三種方式根據(jù)需要，使用一種即可

3、創(chuàng)建第一個圖表

import { init } from 'klinecharts'
// 初始化圖表
const chart = init(`${domId}`)
// 為圖表添加數(shù)據(jù)
chart.applyNewData([
{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
{ close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
{ close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
{ close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
{ close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
{ close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
{ close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
{ close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
{ close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
{ close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
])

看一下效果：

開源項目地址：https://github.com/liihuu/KLineChart

示例代碼地址：https://github.com/liihuu/KLineChartSample

示例頁面地址：https://liihuu.github.io/KLineChart

開源項目作者：liihuu

家好，很高興又見面了，我是"高級前端?進階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進步，也歡迎大家關(guān)注、點贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動力。

今天給大家?guī)淼闹黝}是HTML5 和word的互相轉(zhuǎn)化，話不多說，直接進入正題！

1.HTML轉(zhuǎn)化為Word之 html-docx-js

1.1 什么是 html-docx-js

html-docx-js 是一個非常小的庫，能夠?qū)?HTML 文檔轉(zhuǎn)換為 Microsoft Word 2007 及更高版本使用的 DOCX 格式。 html-docx-js 設(shè)法使用稱為“altchunks”的功能在瀏覽器中執(zhí)行轉(zhuǎn)換。 簡而言之，它允許以不同的標記語言嵌入內(nèi)容。 開發(fā)者使用 MHT 文檔將嵌入內(nèi)容發(fā)送到 Word，因為它允許處理圖像。 Word 打開此類文件后，會將外部內(nèi)容轉(zhuǎn)換為 Word Processing ML（這是 DOCX 文件的標記語言的調(diào)用方式）并替換引用。

Microsoft Word for Mac 2008 不支持 Altchunk，LibreOffice 和 Google Docs 也不支持 Altchunk。

關(guān)于 html-docx-js 庫有幾點需要說明：

• html-docx-js 適用于任何支持 Blob 的現(xiàn)代瀏覽器（無論是本機還是通過 Blob.js）。它在 Google Chrome 36、Safari 7 和 Internet Explorer 10 上進行了測試，也適用于使用 Buffer 而不是 Blob 的 Node.js（在 v0.10.12 上測試）。
• html-docx-js 僅支持內(nèi)聯(lián)的 base64 圖像（通過 DATA URI 獲取）。 但動態(tài)轉(zhuǎn)換常規(guī)圖像（來自靜態(tài)文件夾）很容易，開發(fā)者可以自行完成。

目前 Mammoth 在 Github 上通過 MIT 協(xié)議開源，有超過 1k 的 star、0.3k 的 fork、0.7k 的項目依賴量、NPM 周平均下載量 9k，是一個值得關(guān)注的前端開源項目。

1.2 如何使用 html-docx-js

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

asBlob 可以采用其他選項來控制文檔的頁面設(shè)置：

• orientation：橫向或縱向（默認）
• margins：邊距大小圖
• top：數(shù)字（默認：1440，即 2.54 厘米）
• right：數(shù)字（默認：1440）
• bottom：數(shù)字（默認：1440）
• left：數(shù)字（默認：1440）
• header：數(shù)字（默認值：720）
• footer：數(shù)字（默認值：720）
• gutter：數(shù)字（默認值：0）

比如下面的例子：

var converted = htmlDocx.asBlob(content, {
  orientation: "landscape",
  margins: { top: 720 },
});
saveAs(converted, "test.docx");

需要注意的是，開發(fā)者需要傳遞完整、有效的 HTML（包括 DOCTYPE、html 和 body 標簽）。 這可能不太方便，但可以讓開發(fā)者在樣式標簽中包含 CSS 規(guī)則。

html-docx-js 作為獨立”Browserify 模塊（UMD）分發(fā)。 開發(fā)者可以將其作為 html-docx 要求。 如果沒有可用的模塊加載器，它將把自己注冊在 window.htmlDocx。

2.mammoth.js

2.1 什么是 mammoth.js

Mammoth.js 旨在轉(zhuǎn)換 .docx 文檔，例如：由 Microsoft Word、Google Docs 和 LibreOffice 創(chuàng)建的文檔，并將其轉(zhuǎn)換為 HTML。 Mammoth 的目標是通過使用文檔中的語義信息并忽略其他細節(jié)來生成簡單且干凈的 HTML。 例如，Mammoth 將任何具有標題 1 樣式的段落轉(zhuǎn)換為 h1 元素，而不是嘗試精確復(fù)制標題的樣式（字體、文本大小、顏色等）。

.docx 使用的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)之間存在很大的不匹配，這意味著對于更復(fù)雜的文檔來說，轉(zhuǎn)換不太可能完美。 如果開發(fā)者僅使用樣式來對文檔進行語義標記，那么 Mammoth 效果最佳。

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

• 標題、列表、評論
• 從自己的 docx 樣式到 HTML 的可定制映射。 例如，可以通過提供適當(dāng)?shù)臉邮接成鋵?warningHeading 轉(zhuǎn)換為 h1.warning。
• Tables： 當(dāng)前忽略表格本身的格式（例如：邊框），但文本的格式與文檔其余部分的格式相同。
• 腳注和尾注、圖片、粗體、斜體、下劃線、刪除線、上標和下標、鏈接、Line、Line breaks
• 文本框：文本框的內(nèi)容被視為出現(xiàn)在包含文本框的段落之后的單獨段落。

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ì)開源項目。

2.2 使用 mammoth.js

以文檔轉(zhuǎn)換為例。

Mammoth 允許在轉(zhuǎn)換文檔之前對其進行處理。 例如，假設(shè)該文檔尚未進行語義標記，但開發(fā)者知道任何居中對齊的段落都應(yīng)該是標題，則可以使用 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ù)進行優(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 示例可以參考文末資料，本文不再過多展開。

3.本文總結(jié)

本文主要和大家介紹 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