C# 将Html转为Word

文分享以C#程序代码为例，实现将Html文件转换Word文档的方法。在实际转换场景中可参考本文的方法，转换前，请按照如下方法引用Word API的dll文件到Visual Studio。安装时，可通过以下2种方法：

1.通过NuGet安装dll（2种方法）

1.1 可以在Visual Studio中打开“解决方案资源管理器”，鼠标右键点击“引用”，“管理NuGet包”，然后搜索“Free Spire.Doc”，点击“安装”。等待程序安装完成。

1.2 将以下内容复制到PM控制台安装：

Install-Package FreeSpire.Doc -Version 10.2

2.手动添加dll引用

可通过手动下载包到本地，然后解压，找到BIN文件夹下的Spire.Doc.dll。然后在Visual Studio中打开“解决方案资源管理器”，鼠标右键点击“引用”，“添加引用”，将本地路径BIN文件夹下的dll文件添加引用至程序。

完成引用后，编辑如下代码实现格式转换：

using Spire.Doc;

namespace HTMLtoWord
{
    class Program
    {
        static void Main(string[] args)
        {
            //创建 Document 对象
            Document document=new Document();

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

            //将HTML文件转为Word并保存
            document.SaveToFile("HtmltoWord.docx", FileFormat.Docx2013);
            System.Diagnostics.Process.Start("HtmltoWord.docx");
        }
    }
}

转换效果：

—END—

前面一篇文章：「高频面试题」浏览器从输入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、合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。

渲染过程中还有两个我们经常听到的概念：重排和重绘。在这篇文章中就不细说了，下一篇文章再详细介绍。

用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>

在线咨询

上一篇：Axure教程：中继器实现对评论的编辑
下一篇：学校表白墙冲上热搜！网友：哈哈哈哈笑到肚子疼

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

C# 将Html转为Word

1. 构建DOM树

2. 样式计算

2.1 解析CSS

2.2 属性值标准化

2.3 计算DOM树中每个节点的样式

3. 布局阶段

3.1 创建布局树

3.2 布局计算

4. 分层

5. 图层绘制

6. 栅格化(raster)操作

7. 合成和显示

8. 总结

您的项目需求