C# 將Html轉(zhuǎn)為Word

文分享以C#程序代碼為例，實(shí)現(xiàn)將Html文件轉(zhuǎn)換Word文檔的方法。在實(shí)際轉(zhuǎn)換場(chǎng)景中可參考本文的方法，轉(zhuǎn)換前，請(qǐng)按照如下方法引用Word API的dll文件到Visual Studio。安裝時(shí)，可通過(guò)以下2種方法：

1.通過(guò)NuGet安裝dll（2種方法）

1.1 可以在Visual Studio中打開(kāi)“解決方案資源管理器”，鼠標(biāo)右鍵點(diǎn)擊“引用”，“管理NuGet包”，然后搜索“Free Spire.Doc”，點(diǎn)擊“安裝”。等待程序安裝完成。

1.2 將以下內(nèi)容復(fù)制到PM控制臺(tái)安裝：

Install-Package FreeSpire.Doc -Version 10.2

2.手動(dòng)添加dll引用

可通過(guò)手動(dòng)下載包到本地，然后解壓，找到BIN文件夾下的Spire.Doc.dll。然后在Visual Studio中打開(kāi)“解決方案資源管理器”，鼠標(biāo)右鍵點(diǎn)擊“引用”，“添加引用”，將本地路徑BIN文件夾下的dll文件添加引用至程序。

完成引用后，編輯如下代碼實(shí)現(xiàn)格式轉(zhuǎn)換：

using Spire.Doc;

namespace HTMLtoWord
{
    class Program
    {
        static void Main(string[] args)
        {
            //創(chuàng)建 Document 對(duì)象
            Document document=new Document();

            //加載HTML文件
            document.LoadFromFile("test.html");

            //將HTML文件轉(zhuǎn)為Word并保存
            document.SaveToFile("HtmltoWord.docx", FileFormat.Docx2013);
            System.Diagnostics.Process.Start("HtmltoWord.docx");
        }
    }
}

轉(zhuǎn)換效果：

—END—

前面一篇文章：「高頻面試題」瀏覽器從輸入url到頁(yè)面展示中間發(fā)生了什么中，我們有對(duì)瀏覽器的渲染流程做了一個(gè)概括性的介紹，今天這篇文章我們將深入學(xué)習(xí)這部分內(nèi)容。

對(duì)于很多前端開(kāi)發(fā)來(lái)說(shuō)，平常做工主要專注于業(yè)務(wù)開(kāi)發(fā)，對(duì)瀏覽器的渲染階段可能不是很了解。實(shí)際上這個(gè)階段很重要，了解瀏覽器的渲染過(guò)程，能讓我們知道我們寫(xiě)的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個(gè)頁(yè)面的，在頁(yè)面性能優(yōu)化的時(shí)候有相應(yīng)的解決思路。

我們先來(lái)看一個(gè)問(wèn)題：

HTML、CSS、JS文件在瀏覽器中是如何轉(zhuǎn)化成頁(yè)面的？

如果你回答不上來(lái)，那就往下看吧。

按照渲染的時(shí)間順序，渲染過(guò)程可以分為下面幾個(gè)子階段：構(gòu)建DOM樹(shù)、樣式計(jì)算、布局階段、分層、柵格化和合成顯示。

下面詳細(xì)看下每個(gè)階段都做了哪些事情。

1. 構(gòu)建DOM樹(shù)

HTML文檔描述一個(gè)頁(yè)面的結(jié)構(gòu)，但是瀏覽器無(wú)法直接理解和使用HTML，所以需要通過(guò)HTML解析器將HTML轉(zhuǎn)換成瀏覽器能夠理解的結(jié)構(gòu)——DOM樹(shù)。

HTML文檔中所有內(nèi)容皆為節(jié)點(diǎn)，各節(jié)點(diǎn)之間有層級(jí)關(guān)系，彼此相連，構(gòu)成DOM樹(shù)。

構(gòu)建過(guò)程：讀取HTML文檔的字節(jié)(Bytes)，將字節(jié)轉(zhuǎn)換成字符(Chars)，依據(jù)字符確定標(biāo)簽(Tokens)，將標(biāo)簽轉(zhuǎn)換成節(jié)點(diǎn)(Nodes)，以節(jié)點(diǎn)為基準(zhǔn)構(gòu)建DOM樹(shù)。參考下圖：

打開(kāi)Chrome的開(kāi)發(fā)者工具，在控制臺(tái)輸入 document 后回車，就能看到一個(gè)完整的DOM樹(shù)結(jié)構(gòu)，如下圖所示：

在控制臺(tái)打印出來(lái)的DOM結(jié)構(gòu)和HTML內(nèi)容幾乎一樣，但和HTML不同的是，DOM是保存在內(nèi)存中的樹(shù)狀結(jié)構(gòu)，可以通過(guò)JavaScript來(lái)查詢或修改其內(nèi)容。

2. 樣式計(jì)算

樣式計(jì)算這個(gè)階段，是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的表現(xiàn)樣式。

2.1 解析CSS

CSS樣式可以通過(guò)下面三種方式引入：

通過(guò)link引用外部的CSS文件
style 標(biāo)簽內(nèi)的CSS
元素的style屬性內(nèi)嵌的CSS

和HTML一樣，瀏覽器無(wú)法直接理解純文本的CSS樣式，需要通過(guò)CSS解析器將CSS解析成 styleSheets 結(jié)構(gòu)，也就是我們常說(shuō)的 CSSOM樹(shù)。

styleSheets結(jié)構(gòu)同樣具備查詢和修改功能：

document.styleSheets

2.2 屬性值標(biāo)準(zhǔn)化

屬性值標(biāo)準(zhǔn)化看字面意思有點(diǎn)不好理解，我們通過(guò)下面一個(gè)例子來(lái)看看什么是屬性值標(biāo)準(zhǔn)化：

在寫(xiě)CSS樣式的時(shí)候，我們?cè)谠O(shè)置color屬性值的時(shí)候，經(jīng)常會(huì)用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉(zhuǎn)換成渲染引擎容易理解的、標(biāo)準(zhǔn)化的計(jì)算值，這個(gè)過(guò)程就是屬性值標(biāo)準(zhǔn)化。

white標(biāo)準(zhǔn)化后的值為 rgb(255, 255, 255)

2.3 計(jì)算DOM樹(shù)中每個(gè)節(jié)點(diǎn)的樣式

完成樣式的屬性值標(biāo)準(zhǔn)化后，就需要計(jì)算每個(gè)節(jié)點(diǎn)的樣式屬性，這個(gè)階段CSS有兩個(gè)規(guī)則我們需要清楚：

繼承規(guī)則：每個(gè)DOM節(jié)點(diǎn)都包含有父節(jié)點(diǎn)的樣式
層疊規(guī)則：層疊是CSS的一個(gè)基本特征，是一個(gè)定義了如何合并來(lái)自多個(gè)源的屬性值的算法。

樣式計(jì)算階段是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的具體樣式，在計(jì)算過(guò)程中需要遵守CSS的繼承和層疊兩個(gè)規(guī)則。

該階段最終輸出的內(nèi)容是每個(gè)DOM節(jié)點(diǎn)的樣式，并被保存在 ComputedStyle 的結(jié)構(gòu)中。

3. 布局階段

經(jīng)過(guò)上面的兩個(gè)步驟，我們已經(jīng)拿到了DOM樹(shù)和DOM樹(shù)中元素的樣式，接下來(lái)需要計(jì)算DOM樹(shù)中可見(jiàn)元素的幾何位置，這個(gè)計(jì)算過(guò)程就是布局。

3.1 創(chuàng)建布局樹(shù)

在DOM樹(shù)中包含了一些不可見(jiàn)的元素，例如 head 標(biāo)簽，設(shè)置了 display:none 屬性的元素，所以我們需要額外構(gòu)建一棵只包含可見(jiàn)元素的布局樹(shù)。

構(gòu)建過(guò)程：從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷，將所有可見(jiàn)的節(jié)點(diǎn)加到布局樹(shù)中，忽略不可見(jiàn)的節(jié)點(diǎn)。

3.2 布局計(jì)算

到這里我們就有了一棵構(gòu)建好的布局樹(shù)，就可以開(kāi)始計(jì)算布局樹(shù)節(jié)點(diǎn)的坐標(biāo)位置了。從根節(jié)點(diǎn)開(kāi)始遍歷，結(jié)合上面計(jì)算得到的樣式，確定每個(gè)節(jié)點(diǎn)對(duì)象在頁(yè)面上的具體大小和位置，將這些信息保存在布局樹(shù)中。

布局階段的輸出是一個(gè)盒子模型，它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。

4. 分層

現(xiàn)在我們已經(jīng)有了布局樹(shù)，也知道了每個(gè)元素的具體位置信息，但是還不能開(kāi)始繪制頁(yè)面，因?yàn)轫?yè)面中會(huì)有像3D變換、頁(yè)面滾動(dòng)、或者用 z-index 進(jìn)行z軸排序等復(fù)雜效果，為了更方便實(shí)現(xiàn)這些效果，渲染引擎還需要為特定的節(jié)點(diǎn)生成專用的圖層，并生成一棵對(duì)應(yīng)的圖層樹(shù)(LayerTree)。

在Chrome瀏覽器中，我們可以打開(kāi)開(kāi)發(fā)者工具，選擇 Elements-Layers 標(biāo)簽，就可以看到頁(yè)面的分層情況，如下圖所示：

瀏覽器的頁(yè)面實(shí)際上被分成了很多圖層，這些圖層疊加后合成了最終的頁(yè)面。

到這里，我們構(gòu)建了兩棵樹(shù)：布局樹(shù)和圖層樹(shù)。下面我們來(lái)看下這兩棵樹(shù)之間的關(guān)系：

正常情況下，并不是布局樹(shù)的每個(gè)節(jié)點(diǎn)都包含一個(gè)圖層，如果一個(gè)節(jié)點(diǎn)沒(méi)有對(duì)應(yīng)的圖層，那么這個(gè)節(jié)點(diǎn)就從屬于父節(jié)點(diǎn)的圖層。

那節(jié)點(diǎn)要滿足什么條件才會(huì)被提升為一個(gè)單獨(dú)的圖層？只要滿足下面其中一個(gè)條件即可：

擁有層疊上下文屬性的元素會(huì)被提升為單獨(dú)的一個(gè)圖層
需要剪裁(clip)的地方也會(huì)被創(chuàng)建為圖層。

5. 圖層繪制

構(gòu)建好圖層樹(shù)之后，渲染引擎就會(huì)對(duì)圖層樹(shù)中的每個(gè)圖層進(jìn)行繪制。

渲染引擎實(shí)現(xiàn)圖層繪制，會(huì)把一個(gè)圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個(gè)繪制列表。

6. 柵格化(raster)操作

繪制一個(gè)圖層時(shí)會(huì)生成一個(gè)繪制列表，這只是用來(lái)記錄繪制順序和繪制指令的列表，實(shí)際上繪制操作是由渲染引擎中的合成線程來(lái)完成的。

通過(guò)下圖來(lái)看下渲染主線程和合成線程之間的關(guān)系：

當(dāng)圖層的繪制列表準(zhǔn)備好后，主線程會(huì)把該繪制列表提交給合成線程，合成線程開(kāi)始工作。

首先合成線程會(huì)將圖層劃分為圖塊(tile)，圖塊大小通常是 256256 或者 512512。

然后合成線程會(huì)按照視口附近的圖塊來(lái)優(yōu)先生成位圖，實(shí)際生成位圖的操作是由柵格化來(lái)執(zhí)行的。所謂柵格化，是指將圖塊轉(zhuǎn)換為位圖。而圖塊是柵格化執(zhí)行的最小單位。渲染進(jìn)程維護(hù)了一個(gè)柵格化的線程池，所有的圖塊柵格化都是在線程池內(nèi)執(zhí)行的，運(yùn)行方式如下圖所示：

7. 合成和顯示

一旦所有圖塊都被光柵化，合成線程就會(huì)生成一個(gè)繪制圖塊的命令——“DrawQuad”，然后將該命令提交給瀏覽器進(jìn)程。

瀏覽器進(jìn)程里面有一個(gè)名字叫做 viz 的組件，用來(lái)接收合成線程發(fā)過(guò)來(lái)的 DrawQuad 命令，然后根據(jù)命令執(zhí)行。 DrawQuad 命令，將其頁(yè)面內(nèi)容繪制到內(nèi)存中，最后再將內(nèi)存顯示在屏幕上。

多年開(kāi)發(fā)老碼農(nóng)福利贈(zèng)送：網(wǎng)頁(yè)制作，網(wǎng)站開(kāi)發(fā)，web前端開(kāi)發(fā)，從最零基礎(chǔ)開(kāi)始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋電子書(shū)＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，送給每一位對(duì)編程感興趣的小伙伴

8. 總結(jié)

一個(gè)完整的渲染流程可以總結(jié)如下：

1、渲染進(jìn)程將HTML內(nèi)容轉(zhuǎn)換為瀏覽器能夠讀懂的DOM樹(shù)結(jié)構(gòu)。
2、渲染引擎將CSS樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets，計(jì)算出DOM節(jié)點(diǎn)的樣式。
3、創(chuàng)建布局樹(shù)，并計(jì)算所需元素的布局信息。
4、對(duì)布局樹(shù)進(jìn)行分層，并生成分層樹(shù)。
5、為每個(gè)圖層生成繪制列表，并將其提交到合成線程。
6、合成線程將圖層分圖塊，并柵格化將圖塊轉(zhuǎn)換成位圖。
7、合成線程發(fā)送繪制圖塊命令給瀏覽器進(jìn)程。瀏覽器進(jìn)程根據(jù)指令生成頁(yè)面，并顯示到顯示器上。

渲染過(guò)程中還有兩個(gè)我們經(jīng)常聽(tīng)到的概念：重排和重繪。在這篇文章中就不細(xì)說(shuō)了，下一篇文章再詳細(xì)介紹。

用js工具wordexport將頁(yè)面導(dǎo)出為Word文檔

最近工作方面接到新需求，要將頁(yè)面中的person信息導(dǎo)出為Word。

網(wǎng)上查了查，部分都是從JS入手。

親自試用了一些JS工具，發(fā)現(xiàn)稂莠不齊。

不過(guò)最終還是找到了一個(gè)中意的"flower"-->wordexport.js。

導(dǎo)出效果還是不錯(cuò)的，詳情見(jiàn)下方。

目的：

一方面向大家推薦，另一方面希望大家可以不吝賜教，推薦一些更為好用的工具。

案例：

測(cè)試案例的結(jié)構(gòu)，比較簡(jiǎn)單。

(1) 下載必須的js文件

下面給出GitHub的下載地址

https://github.com/eligrey/FileSaver.js/

https://github.com/markswindoll/jQuery-Word-Export

(2) 導(dǎo)入js文件

一共需要導(dǎo)入3個(gè)js文件

后者依賴于jQuery的jquery.min.js

(3) 把需要導(dǎo)出的person信息放到div中

<div id="printTab">

<table>.......</table>

</div>

(4) 創(chuàng)建一個(gè)導(dǎo)出的按鈕

<button type="button" onClick="exportWord()" style="float: left;margin-left: 15px">

導(dǎo)出Word

</button>

(5) 導(dǎo)出Word事件

<script type="text/javascript">

function exportWord(){

$("#printTab").wordExport("odysee");

}

</script>

補(bǔ)充：

$("#printTab").wordExport("odysee");

這里的odysee為導(dǎo)出的Word的名字。

如果不傳入默認(rèn)為jQuery-Word-Export

其實(shí)可以打開(kāi)源碼開(kāi)一下。

如下圖：

(6) 測(cè)試

點(diǎn)擊導(dǎo)出Word按鈕

打開(kāi)odysee文檔

效果還是可以接受的

總結(jié)：

從網(wǎng)上找了幾個(gè)js工具，發(fā)現(xiàn)還是這個(gè)比較好用些。

同時(shí)希望大家可以不吝賜教，多多推薦一些更為好用的工具。

下面貼出word.html源碼(如果大家想要原文件請(qǐng)留言或私信)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<html>

<head>

function exportWord(){

$("#printTab").wordExport("odysee");

}

</script>

</head>

<body>

導(dǎo)出Word

</button>

</div>

<label><font >odysee</font></label>

</div>

<tr>

<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:90px; border:black 0.5pt solid;overflow:hidden;'>odysee</td>

</tr>

<tr>

<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Linux</td>

<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>home/odysee/</td>

<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Centos7</td>

</tr>

<tr>

</tr>

<tr>

<td style='font-family: "Simsun";font-size: 13pt;text-align: center;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;border:black 0.5pt solid;overflow:hidden;' colspan="2" >call me odysee</td>

</tr>

</table>

</div>

</body>

</html>

在線咨詢

上一篇：Axure教程：中繼器實(shí)現(xiàn)對(duì)評(píng)論的編輯
下一篇：學(xué)校表白墻沖上熱搜！網(wǎng)友：哈哈哈哈笑到肚子疼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

C# 將Html轉(zhuǎn)為Word

1. 構(gòu)建DOM樹(shù)

2. 樣式計(jì)算

2.1 解析CSS

2.2 屬性值標(biāo)準(zhǔn)化

2.3 計(jì)算DOM樹(shù)中每個(gè)節(jié)點(diǎn)的樣式

3. 布局階段

3.1 創(chuàng)建布局樹(shù)

3.2 布局計(jì)算

4. 分層

5. 圖層繪制

6. 柵格化(raster)操作

7. 合成和顯示

8. 總結(jié)

您的項(xiàng)目需求