實測，利用js工具wordexport將頁面導出為W

實測，利用js工具wordexport將頁面導出為Word文檔

用js工具wordexport將頁面導出為Word文檔

最近工作方面接到新需求，要將頁面中的person信息導出為Word。

網上查了查，部分都是從JS入手。

親自試用了一些JS工具，發現稂莠不齊。

不過最終還是找到了一個中意的"flower"-->wordexport.js。

導出效果還是不錯的，詳情見下方。

目的：

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

案例：

測試案例的結構，比較簡單。

(1) 下載必須的js文件

下面給出GitHub的下載地址

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

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

(2) 導入js文件

一共需要導入3個js文件

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

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

<div id="printTab">

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

</div>

(4) 創建一個導出的按鈕

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

導出Word

</button>

(5) 導出Word事件

<script type="text/javascript">

function exportWord(){

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

}

</script>

補充：

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

這里的odysee為導出的Word的名字。

如果不傳入默認為jQuery-Word-Export

其實可以打開源碼開一下。

如下圖：

(6) 測試

點擊導出Word按鈕

打開odysee文檔

效果還是可以接受的

總結：

從網上找了幾個js工具，發現還是這個比較好用些。

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

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

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

<html>

<head>

function exportWord(){

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

}

</script>

</head>

<body>

導出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>

頁內容導出word文檔的方法有很多，我們在工作生活中都會遇到需要將網頁上的內容下載到本地文檔的需求，有時遇到一些網頁不支持復制，有些又需要翻頁，不能一次性下載。今天跟大家分享怎么將網頁上的內容導出到我們的word文檔。

一、復制粘貼

作為最原始，也是最可靠的方法，復制粘貼操作簡單有手就行。缺點就是需要進行大量機械操作。

二、通過瀏覽器導出

進入瀏覽器，然后打開我們需要導出的網頁，點擊右側菜單à選擇“更多工具à網頁另存為我們能獲得一個html格式的文檔

在打開我們的wps或者word軟件，通過導入html格式的文檔，另存為word文檔。

通過這個方法，我們可以對整個網頁進行導出，優點是只需要鼠標點選，工作強度變低，缺點是網頁內容全部導出，包括頂部菜單欄，廣告等。

三、采集工具導出

使用采集工具，我們可以對我們想要的元素進行選擇，只下載需要的內容，例如只下載標題內容，只下載圖片、表格等。

通過采集工具選擇內容后，支持對相同組成的頁面進行批量采集，不需要我們再去翻頁面。

可視化的操作頁面，也只需要我們操作鼠標完成點選，就可以將網頁需要的內容一鍵導出本地word，批量導出不需要我們在去找軟件轉換格式。

四、編輯后導出

使用采集工具的SEO模板，可以對我們采集的網頁內容進行翻譯、同義詞替換、敏感詞刪除、圖片水印等操作，讓我們可以批量處理網頁內容到我們本地文檔。

網頁內容導出的三種方法分享就到這里了，每種方法都有自己的優勢，對于需要批量采集、批量編輯翻譯的頁面，使用工具能幫我們完成重復機械的操作，減輕工作負擔，如果大家有更好的意見或者建議，不妨留言討論哦。

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

對于很多前端開發來說，平常做工主要專注于業務開發，對瀏覽器的渲染階段可能不是很了解。實際上這個階段很重要，了解瀏覽器的渲染過程，能讓我們知道我們寫的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個頁面的，在頁面性能優化的時候有相應的解決思路。

我們先來看一個問題：

HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的？

如果你回答不上來，那就往下看吧。

按照渲染的時間順序，渲染過程可以分為下面幾個子階段：構建DOM樹、樣式計算、布局階段、分層、柵格化和合成顯示。

下面詳細看下每個階段都做了哪些事情。

1. 構建DOM樹

HTML文檔描述一個頁面的結構，但是瀏覽器無法直接理解和使用HTML，所以需要通過HTML解析器將HTML轉換成瀏覽器能夠理解的結構——DOM樹。

HTML文檔中所有內容皆為節點，各節點之間有層級關系，彼此相連，構成DOM樹。

構建過程：讀取HTML文檔的字節(Bytes)，將字節轉換成字符(Chars)，依據字符確定標簽(Tokens)，將標簽轉換成節點(Nodes)，以節點為基準構建DOM樹。參考下圖：

打開Chrome的開發者工具，在控制臺輸入 document 后回車，就能看到一個完整的DOM樹結構，如下圖所示：

在控制臺打印出來的DOM結構和HTML內容幾乎一樣，但和HTML不同的是，DOM是保存在內存中的樹狀結構，可以通過JavaScript來查詢或修改其內容。

2. 樣式計算

樣式計算這個階段，是為了計算出DOM節點中每個元素的表現樣式。

2.1 解析CSS

CSS樣式可以通過下面三種方式引入：

通過link引用外部的CSS文件
style 標簽內的CSS
元素的style屬性內嵌的CSS

和HTML一樣，瀏覽器無法直接理解純文本的CSS樣式，需要通過CSS解析器將CSS解析成 styleSheets 結構，也就是我們常說的 CSSOM樹。

styleSheets結構同樣具備查詢和修改功能：

document.styleSheets

2.2 屬性值標準化

屬性值標準化看字面意思有點不好理解，我們通過下面一個例子來看看什么是屬性值標準化：

在寫CSS樣式的時候，我們在設置color屬性值的時候，經常會用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉換成渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。

white標準化后的值為 rgb(255, 255, 255)

2.3 計算DOM樹中每個節點的樣式

完成樣式的屬性值標準化后，就需要計算每個節點的樣式屬性，這個階段CSS有兩個規則我們需要清楚：

繼承規則：每個DOM節點都包含有父節點的樣式
層疊規則：層疊是CSS的一個基本特征，是一個定義了如何合并來自多個源的屬性值的算法。

樣式計算階段是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。

該階段最終輸出的內容是每個DOM節點的樣式，并被保存在 ComputedStyle 的結構中。

3. 布局階段

經過上面的兩個步驟，我們已經拿到了DOM樹和DOM樹中元素的樣式，接下來需要計算DOM樹中可見元素的幾何位置，這個計算過程就是布局。

3.1 創建布局樹

在DOM樹中包含了一些不可見的元素，例如 head 標簽，設置了 display:none 屬性的元素，所以我們需要額外構建一棵只包含可見元素的布局樹。

構建過程：從DOM樹的根節點開始遍歷，將所有可見的節點加到布局樹中，忽略不可見的節點。

3.2 布局計算

到這里我們就有了一棵構建好的布局樹，就可以開始計算布局樹節點的坐標位置了。從根節點開始遍歷，結合上面計算得到的樣式，確定每個節點對象在頁面上的具體大小和位置，將這些信息保存在布局樹中。

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

4. 分層

現在我們已經有了布局樹，也知道了每個元素的具體位置信息，但是還不能開始繪制頁面，因為頁面中會有像3D變換、頁面滾動、或者用 z-index 進行z軸排序等復雜效果，為了更方便實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹(LayerTree)。

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

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

到這里，我們構建了兩棵樹：布局樹和圖層樹。下面我們來看下這兩棵樹之間的關系：

正常情況下，并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的圖層，那么這個節點就從屬于父節點的圖層。

那節點要滿足什么條件才會被提升為一個單獨的圖層？只要滿足下面其中一個條件即可：

擁有層疊上下文屬性的元素會被提升為單獨的一個圖層
需要剪裁(clip)的地方也會被創建為圖層。

5. 圖層繪制

構建好圖層樹之后，渲染引擎就會對圖層樹中的每個圖層進行繪制。

渲染引擎實現圖層繪制，會把一個圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個繪制列表。

6. 柵格化(raster)操作

繪制一個圖層時會生成一個繪制列表，這只是用來記錄繪制順序和繪制指令的列表，實際上繪制操作是由渲染引擎中的合成線程來完成的。

通過下圖來看下渲染主線程和合成線程之間的關系：

當圖層的繪制列表準備好后，主線程會把該繪制列表提交給合成線程，合成線程開始工作。

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

然后合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。而圖塊是柵格化執行的最小單位。渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內執行的，運行方式如下圖所示：

7. 合成和顯示

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

瀏覽器進程里面有一個名字叫做 viz 的組件，用來接收合成線程發過來的 DrawQuad 命令，然后根據命令執行。 DrawQuad 命令，將其頁面內容繪制到內存中，最后再將內存顯示在屏幕上。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

8. 總結

一個完整的渲染流程可以總結如下：

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

渲染過程中還有兩個我們經常聽到的概念：重排和重繪。在這篇文章中就不細說了，下一篇文章再詳細介紹。

在線咨詢

上一篇：ASP.NET實現大視頻上傳
下一篇：一文看懂CSS3動畫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

實測，利用js工具wordexport將頁面導出為W

1. 構建DOM樹

2. 樣式計算

2.1 解析CSS

2.2 屬性值標準化

2.3 計算DOM樹中每個節點的樣式

3. 布局階段

3.1 創建布局樹

3.2 布局計算

4. 分層

5. 圖層繪制

6. 柵格化(raster)操作

7. 合成和顯示

8. 總結

您的項目需求