文分享以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)換:
C#
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è)階段都做了哪些事情。
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)容。
樣式計(jì)算這個(gè)階段,是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的表現(xiàn)樣式。
CSS樣式可以通過(guò)下面三種方式引入:
和HTML一樣,瀏覽器無(wú)法直接理解純文本的CSS樣式,需要通過(guò)CSS解析器將CSS解析成 styleSheets 結(jié)構(gòu),也就是我們常說(shuō)的 CSSOM樹(shù)。
styleSheets結(jié)構(gòu)同樣具備查詢和修改功能:
document.styleSheets
屬性值標(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)
完成樣式的屬性值標(biāo)準(zhǔn)化后,就需要計(jì)算每個(gè)節(jié)點(diǎn)的樣式屬性,這個(gè)階段CSS有兩個(gè)規(guī)則我們需要清楚:
樣式計(jì)算階段是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的具體樣式,在計(jì)算過(guò)程中需要遵守CSS的繼承和層疊兩個(gè)規(guī)則。
該階段最終輸出的內(nèi)容是每個(gè)DOM節(jié)點(diǎn)的樣式,并被保存在 ComputedStyle 的結(jié)構(gòu)中。
經(jīng)過(guò)上面的兩個(gè)步驟,我們已經(jīng)拿到了DOM樹(shù)和DOM樹(shù)中元素的樣式,接下來(lái)需要計(jì)算DOM樹(shù)中可見(jiàn)元素的幾何位置,這個(gè)計(jì)算過(guò)程就是布局。
在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)。
到這里我們就有了一棵構(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)的確切位置與大小。
現(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è)條件即可:
構(gòu)建好圖層樹(shù)之后,渲染引擎就會(huì)對(duì)圖層樹(shù)中的每個(gè)圖層進(jìn)行繪制。
渲染引擎實(shí)現(xiàn)圖層繪制,會(huì)把一個(gè)圖層的繪制拆分成很多小的繪制指令,然后將這些指令按照順序組成一個(gè)繪制列表。
繪制一個(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)行方式如下圖所示:
一旦所有圖塊都被光柵化,合成線程就會(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ì)編程感興趣的小伙伴
一個(gè)完整的渲染流程可以總結(jié)如下:
渲染過(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>
<title>人員信息</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./FileSaver.js"></script>
<script type="text/javascript" src="./jquery.wordexport.js"></script>
<script type="text/javascript">
function exportWord(){
$("#printTab").wordExport("odysee");
}
</script>
</head>
<body>
<div style="height:40px">
<button type="button" onClick="exportWord()" style="float: left;margin-left: 15px">
導(dǎo)出Word
</button>
</div>
<!-- 打印表 -->
<div id="printTab">
<div align="center">
<div style="height:40px;font-size:20pt;font-family:Simsun;margin-top: 22px">
<label><font >odysee</font></label>
</div>
<table cellspacing=0 cellpadding=0 style='border-color:black; border-style:solid; BORDER-COLLAPSE:collapse;border:none;table-layout:fixed;word-break:break-all;'>
<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;height:50px;width:60px; border:black 0.5pt solid;overflow:hidden;'>姓 名</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;width:90px; border:black 0.5pt solid;overflow:hidden;'>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;width:60px; border:black 0.5pt solid;overflow:hidden;'>性 別</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;width:110px; border:black 0.5pt solid;overflow:hidden;'>♂</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;width:75px; border:black 0.5pt solid;overflow:hidden;'>出生年月</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;width:110px; border:black 0.5pt solid;overflow:hidden;'>2019-6-13</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;height:50px;border:black 0.5pt solid;overflow:hidden;'>民 族</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;'>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;'>籍 貫</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;'>出生地</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>
<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;height:50px;border:black 0.5pt solid;overflow:hidden;'>入 學(xué)<br/>時(shí) 間</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;'>2017</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;'>參加工<br/>作時(shí)間</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;'>2018</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;'>健康狀況</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;'>開(kāi)機(jī)中...</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;height:50px;border:black 0.5pt solid;overflow:hidden;'>電 話</td>
<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>
<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;'>郵 箱</td>
<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" >I am in toutiao</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。