HTML转PDF
1
本科毕业设计
设计题目：HTML网页转换PDF文档的设计与实现
学院：职业技术学院
专业：
班级：
学号：
学生姓名：
指导教师：
2013年06月01日
1 2
大学本科毕业论文（设计）
诚信责任书
本人郑重声明：本人所呈交的毕业论文（设计），是在导师的指导下独立进行研究所完成。毕业论文（设计）中凡引用他人已经发表或未发表的成果、数据、观点等，均已明确注明出处。
特此声明。
论文（设计）作者签名：
日期：
目录
摘要 (4)
Abstract (5)
第一章概述 (7)
1.1 背景与现状 (7)
1.2 主要内容 (8)
第二章文档结构分析 (10)
2.1网页文档结构分析 (10)
2.1.1 网页基本介绍 (10)
2.1.2 网页组成 (11)
2.2 PDF文档结构分析 (13)
2.2.1 PDF简介 (13)
2.2.2 PDF文档的逻辑结构 (14)
2.3 网页元素与PDF元素的关系 (15)
第三章HTML转PDF程序的设计与实现 (16)
3.1 程序功能分析与设计 (16)
3.1.1 功能分析 (16)
3.1.2 流程图 .............................................................................. 错误！未定义书签。
3.2 编码实现 (18)
3.2.1 程序开发包 (19)
3.2.2 核心功能代码 (21)
3.3 测试 (23)
3.3.1 测试内容 (23)
3.3.2 兼容性测试 (23)
第四章总结与展望 (27)
参考文献 (29)
致谢 (30)
HTML网页转换PDF文档的设计与实现
摘要
随着网络的发展越来越多的人每天都在访问各种形形色色的网站，但是网页不利于保存在电脑里以便下次浏览或者打印成册。PDF文档是近几年的兴起的一种文档格式，PDF文档和文本文档一样有文字内容，图片，而且PDF文档方便阅读，且对于打印也非常便捷。当我们在浏览网页时，能把自己看到的好的网页中保存在本地，有需要时去打印成册，确是一件很惬意的事情，网页转换成PDF文档很有必要。本文首先调查了时下网上的各种网页转换成PDF文档的软件，并且下载后使用，在使用过程中发现很多问题：一些软件在使用时须搭建环境，这和计算机基础薄弱的人群基本无缘；一部分软件使用前须安装和注册，此类软件在使用时很不友好，对于那些急于转换网页的人群来说就是黑名单了；还有一部分软件是收费软件，收费软件对于中国的国情来说很难生存。本设计采用插件的方式对网页进行PDF文档的转换，操作简便，为计算机基础薄弱和急于保存文档的人群提供便利，而且本设计免费，符合中国国情。设计之初，首先对网页结构进行深入的分析，然后分析PDF文档的结构，以对以后的文档转换做铺垫。设计采用B/S模式，在服务器端运行程序，客户端只发送请求和下载文档。设计的实现通过引用pd4ml工具包进行文档的转换，再传回客户端。设计完成后，对设计进行了一系列的测试，设计的主要问题就是各浏览器的兼容性测试，测试结果达到预期目标，该设计在各浏览器的兼容性良好。论文末尾，对于本设的不足之处和展望进行了总结，也对整个软件设计的过程进行了概括。
关键词：HTML，PDF，pd4ml，转换
The design and implementation of HTML to PDF
Abstract
With the development of the network more and more people every day in the access of every hue website webpage,but is not conducive to the preservation in the computer so that next time you view or print a book.PDF document is a document format in the last few years,PDF document and text file as text,images,and PDF documents for easy reading,and printing is also very convenient.When we in the webpage that browse,able to see their own good webpage saved in the local,when there is a need to print a book,it is a very pleasant thing,it is necessary to webpage into PDF document.This paper investigated the current on-line webpage into PDF documents and download software,after use,found a lot of problems in the process of using some software to build the environment:when in use,it and computer foundation weak crowd basically no edge;a part of the software to be installed and registered before use,this kind of software in use is not friendly,for those who are eager to convert webpage population is black list;there is a part of software is software charges,charges software for China is very difficult to survive.Conversion,the design adopts plug-in approach to PDF document on the webpage has the advantages of simple operation,provide convenience for computer foundation is weak and the rush to save the document of the crowd,but the design of free,in line with China's national conditions.The beginning of the design,first carries on the thorough analysis to the webpage structure,then analysis the structure of an PDF document,to pave the way for future document conversion to.The design adopts B/S mode,run the program on the server side,the client only sends a request and download documents.To achieve the conversion of document referenced by the pd4ml toolkit,and then back to the client.After the completion of the design,to design a series of tests,compatibility test is the main problems in the design of the browser,the test results meet the expected
goal,the design in the browser compatibility is good.At the end of the thesis,the shortcomings and prospects of this design are summarized,and the whole process of software design are summarized.
Keywords:HTML,PDF，pd4ml，transform
第一章概述
1.1 背景与现状
PDF文档在日常办公中的重要性相信只要是接触过office工作的人都会了解，而网络在现在办公中的地位也是越发重要。在日常进行网页浏览的时候，如果发现了自己特别喜欢的文章，通常我们都会把这个网页保存为PDF格式，然后存储在自己的电脑里。不过，但并不是每个人都会制作PDF文档，而且目前的一些在线转换的网站转换速度都不是很理想。而如果安装第三方软件的话，十显得十分麻烦。那么，有没有一种办法，可以直接将网页转换为PDF格式文件呢？
目前网上有很多的HTML转换成PDF的软件，下面罗列了几款HTML转换PDF的软件。
●https://www.360docs.net/doc/611374108.html, HTML2PDF除了支持输入HTML网页网址转换成PDF，还支持输入html
代码转换成PDF。网站上还有一个「把当前页面另存为PDF」的Bookmarklet。可以实现在浏览网页时只需点击一下收藏夹的链接，就可以得到一份PDF了。不过此款软件相对快捷，只是需要一定的操作基础，对于一些计算机基础相对薄弱的人群操作有一定的难度。
●Winnovative-Soft html2pdf live demo Winnovative软件公司提供的在线demo。
也支持html代码转换PDF。转换方式有三种：文本、带图片以及把整个网页以图片形式转换成PDF。作为demo，这个服务很有商业特征地带限制，幸好只是页数上限，对我们使用服务没有多大影响。
●Web2pdf Online Web2pdf是一个widget服务，为你的网站或博客提供一个java的
「另存为PDF格式」按钮。不过这个按钮样式比较简陋，而且使用服务得免费注个册，现在的人群都是比较懒惰的，所以这款软件有一定局限性。
●PDFonFLY这个网站提供HTML地址转换PDF和带格式文本转换PDF。值得一提的是
带格式文本转换，给你一个像日志编辑那样带工具栏的窗口去输入你的内容，然后帮你把这些内容转换成PDF，算是个工具栏稍丑的在线办公应用。
●ExpertPDF Components这也是个在线demo，不过界面比Winnovative要好看。提
供地址转换跟html代码转换。不过这款软件收费是它最大的败笔，在笔者看来，收
费软件在国内的受欢迎度远不及免费，虽然免费软件功能比不上收费的。
●RSS2PDF虽然网站名字叫RSS2PDF，不过在网页转换是支持的。不过它最大的亮点
两点还是支持RSS、Atom、OPML、XML，凭借RSS转换连Flickr的图片也能用来做成PDF。网页上还提供种类很多的小书签，像https://www.360docs.net/doc/611374108.html,那样让你可以凭借点击收藏夹的链接把当前浏览的页面另存为PDF格式。
●PDF24 这个网站支持的html文件2pdf，所以你需要先把网页保存为html格式再在
网页上上传进行转换。不美的是生成的PDF是发到你的邮箱，而不是直接下载。
●PrimoOnline Primo就是那个比较有名的虚拟打印机。它也提供在线地址转换和文
件转换服务，不过也是发到邮箱，不是直接下载。
通过对网络上的相关软件的研究与分析，发现网站页面直接转换成PDF的几近于无，对于办公人群或者文学爱好者来说无疑是痛苦的。没有一定计算机基础的他们，如何在茫茫资源海洋中寻找到一款称心如意的软件。有没有一款软件直接在网页上进行PDF的生成，而且不需要去辛苦地寻找工具，不用麻烦地去注册，缴费。
本设计彻底解决以上问题，在HTML中直接实现HTML转换PDF，省去找寻软件、下载、注册和收费的环节，对于网络搜索基础较薄弱的人群有很大的帮助。本设计对于网站系统的自主转换有很大帮助。
1.2 主要内容
设计初，想做一个客户端来实现HTML转PDF这个功能，可是在网上一搜索，该类软件多不可数。觉得自己设计客户端岂不是毫无新意？恰巧同学让我帮忙将PDF转换成WORD，问我可以在PDF编辑器上直接将PDF转换WORD么。这时想法来了，我是不是可以直接在网页上直接将它转换成PDF而不用通过客户端软件去转换，这样我就不用去网上搜索那些浩如烟海的软件，只需点击转换，PDF文档就下载到本地了呢？当然，实现这个功能或许很困难，但是我觉得这个想法很好。
大刀阔斧地进行软件的开发，然后测试，历经许多错误和各种调试、修改，终于完成软件的开发。然后就是后续的各种测试，兼容性，抗压性，最终完成设计。当然记录这一过程是必要的，下面介绍本文档的大体内容和章节：第一章：首先对于HTML的文档进行的解析，它的组成和语言进行细致的分析。然后对PDF的文档结构进行了细化，解析过程、各部分的组成等等。最后就是两者之间关系的阐述。第二章对于程序功能的
细化描述和该设计的实现的过程以及最后的程序测试。第三章：对于该设计的不足之处和它的局限性进行详细描述，这是在设计过程中所不能避免的。
第二章文档结构分析
2.1网页文档结构分析
2.1.1 网页基本介绍
1.网页概况：
一个完整的网页，分为页头、内容区、尾页三部分:页头：网页顶部的内容。网站栏目一般置于页头。内容区：页头和页尾中部的部分。网页中又有文字、图片、音频、动画、视频等元素。商品介绍或者新闻文章等内容，在这个区域显示。页尾：在网页最下部，一般是联系方式等内容。
在一个网站内，页头区和页尾区在所有网页中是一样的，是每个网页固定显示的内容。内容区则是不一样的，可以是商品介绍，也可以是新闻文章等其他内容。网站的第一个网页（首页）的内容区，为首页内容区。是网站的重要部分，一般都设有商品橱窗展示区、公告信息区块等。在设计一个网站时，页头、页尾是独立编辑，网页显示时与其它内容组合成一个完整网页。一个典型的首页结构如图2-1所示：
页头内容
有导航栏目和主题FLASH
主要内容区
网页主体：包括新闻、主题等丰富内容
页尾内容
主要是联系方式和版权等信息，也有导航栏目
图2-1 网页结构图
2.网页的类型：
一个网站由很多网页组成，网页之间由URL链接起来。按网页的不同，系统对网页
进行如下归类：
首页：网站的第一个网页。一般有较多的内容区块，如商品展示区、公告区等。
栏目内容显示页：显示栏目内容，样式由格式网页控制。商品列表网页：网上展示或销售的商品列表；由动态的数据生成。样式由列表格式控制。商品介绍网页：商品的详细介绍网页，有商品说明等内容；由动态的数据生成，样式由格式网页控制。新闻资讯列表网页：消息类、资讯类、新闻类的的目录列表；由动态的文章生成。样式由列表格式控制。新闻资讯内容网页：消息类、资讯类、新闻类的内容显示网页；由动态的文章生成。样式由格式列表控制。其他网页：如会员注册、会员中心等网页。
3、样式网页：
样式网页是规定动态数据显示格式的网页。包括“格式列表”和“内容显示格式网页”二种形式。样式网页中的数据部分，由格式模块规定显示样式。因此一个样式网页，由固定的内容和动态内容（即格式模块）组成。样式网页是控制动态内容显示的，在网站上不独立显示，与对应的数据组合后才是一个完整的网页(有独立url地址)。系统预设计的样式网页有：商品列表、商品介绍、新闻资讯列表、新闻资讯内容、栏目内容显示页，共5个格式列表页和内容格式页。
2.1.2 网页设计语言
网页的设计语言主要有HTML语言、CSS样式表和脚本语言。
1.HTML语言
HTML（Hypertext Markup Language），超文本标记语言，是用于描述网页文档的一种标记语言。一个网页对应一个HTML文件，HTML文件以.htm（磁盘操作系统DOS限制的英语缩写为扩展名）或.html（英语缩写为扩展名）。可以使用任何能够生成TXT类型文件的文本编辑器来生成超文本标记语言文件，只需修改文件后缀名即可。
标准的HTML语言文件都具有一个基本的整体结构，标签一般都是成对出现（部分标记除外例如：
），即HTML语言文件的开头与结尾标志和HTML语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
标记符说明该文件是用HTML语言来描述的。它是文件的开头，而则表示该文件的结尾，它们是HTML语言文件的开始标记和结尾标记。
HTML语言整体结构包括两大部分：head和body两部分。head部分（
）包括了网页标题title、脚本语言script和网页的样式style等.body部分(
)是展示在人们眼中的“页面的内容”。2.CSS样式表
级联样式表（Cascading Style Sheet）简称“CSS”，又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让图片有边框，当鼠标移上去后边框消失并且替换图片，这就是一种风格。通过设立CSS样式，可以统一地控制HTML 中各标志的显示属性。CSS样式表可以让我们更有效地控制网页外观。使用CSS样式表，可以精确定位网页中的元素以及HTML中各标签的位置，修改外观以及创建特殊效果的能力。
CSS样式表在HTML中有三种存在方式：外联、内联、内嵌。
外联：HTML 引用一个CSS文件，文件中是对HTML内各元素的修饰。
内联：内联和外联其实并无区别，不过内联把CSS样式写进了HTML 内。
内嵌：
CSS样式在HTML中的三种存在方式，有时候容易引起冲突，这时候可以利用CSS 的默认执行顺序来解决这个问题：内嵌 > 内联 > 外联。这在浏览器兼容性调试中常常用到。
3.脚本语言
脚本语言（Script language，scripting language，scripting programming language）是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。此命名起源于一个脚本“screenplay”，每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。一个脚本通常是解释运行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。而宏语言则可视为脚本语言的分支，两者也有实质上的相同之处。
虽然许多脚本语言都超越了计算机简单任务自动化的领域，成熟到可以编写精巧的程序，但仍然还是被称为脚本。几乎所有计算机系统的各个层次都有一种脚本语言。包括操作系统层，如计算机游戏，网络应用程序，字处理文档，网络软件等。在许多方面，
高级编程语言和脚本语言之间互相交叉，二者之间没有明确的界限。
2.2 PDF文档结构分析
2.2.1 PDF简介
结构化的文档格式PDF(Portable Document Format)是由美国排版与图像处
理软件公司Adobe于1993年首次提出的。它从页面描述语言PS（PostScript）发展而来，具有与PS几乎相同的页面描述能力和相似的描述方法。但与PS不同的是，PDF 除了能描述复杂版面外，还具有交互功能（如超链接、交互表单等）、页面随机存取及
字体仿真描述等特性。因此，PDF不仅适合印刷出版，而且也适合电子出版。PDF和目
前在电子出版中占统治地位的HTML语言相比也有自己明显的优势。HTML不能描述版面，而PDF能描述精美的版面；HTML页面中经常出现信息的不一致性(如不同平台，不同浏
览器，不同尺寸的浏览器窗口看到的同一Web页面呈现出不同样子)，而在PDF中不存
在这个问题。PDF不仅具有PS和HTML两者的优点，还克服了它们的缺点，从而实现了
纸张印刷和电子出版的统一。排版后的内容生成PDF文件，则能在交付印刷的同时，进
行网络发行。
一个PDF文件从大的方面来说主要分4个部分：
●文件头 header，指明了该文件所遵从的PDF规范的版本号，它出现在PDF文件的第
一行
●文件体 body，PDF文件的主要部分，由一系列对象组成
●交叉引用表 cross-reference table，为了能对间接对象进行随机存取而设立的一
个间接对象的地址索引表。
●文件尾 trailer，声明了交叉引用表的地址，即指明了文件体的根对象，从而能找
到PDF文件中各个对象体的位置，达到随机访问。另外还保存了PDF文件加密等安全信息。PDF的文档结构如图2-2所示：
Header
Body
Cross-reference table
Trailer
图2-2 PDF文档结构
2.2.2 PDF文档的逻辑结构
作为一种结构化的文件格式，一个PDF文档是由一些称为“对象”的模块组成的。并且每个对象都有数字标号，这样的话可以这些对象就可以被其他的对象所引用。这些对象不需要按照顺序出现在PDF文档里面，出现的顺序可以是任意的，比如一个PDF文件有3页，第3页可以出现在第一页以前，对象按照顺序出现唯一的好处就是能够增加文件的可读性，如果你不会用文本编辑器来阅读PDF结构，那么大可不必关心。正是因为页与页之间的不相关性，就可以对PDF文件的页码进行随机的访问。文件尾（Trail），说明根对象的对象号，并且说明交叉引用表的位置，通过对交叉引用表的查询可以目录对象(Catalog)。这个目录对象是该PDF文档的根对象，包含PDF文档的大纲(outline)和页面组对象（pages）引用。大纲对象是指PDF文件的书签树；页面组对象（pages）包含该文件的页面数，各个页面对象(page)的对象号。
页面（page）对象作为PDF中最重要的对象，包含如何显示该页面的信息，例如使用的字体，包含的内容（文字，图片等），页面的大小。当然里面的子项也可以是其他对象的引用。页面中包含的信息是包含在一个称为流（stream）的对象里，这个流的长度（字节数）必须直接给出或指向另外一个对象。
一个PDF文档的层次关系如图2-3所示：
Trailer Catalog
Page Pageroot
OutLine
Root
Page outlineEntry
(Bookmark)
outlineEntry
(Bookmark)
/Root
/Pages
/Outlines
Page
Tree
Outline
Tree
图2-3 PDF文档的层次关系
2.3 网页元素与PDF元素的关系
作为一款可视化编辑文档，PDF文档在元素组成方面和网页有许多共通之处。它可把文档的文本、格式、字体、颜色、分辨率、链接及图形图像、声音、动态影像等所有的信息封装在一个特殊的整合文件中。而这些特性也正是网页所具备的一些特性，前面也介绍过，网页元素包括，文字、图片、音频、动画、视频。而PDF文档和网页的共通之处优于其他传统文档格式的是两者皆可以在文档上显示超链接而且也方便在浏览器上输出。
一个PDF文档从根本上来说是一个8字节序。其实PDF格式和我们已经熟知的HTML，XML等结构化的文件格式一样，包含有关键字，分隔符，数据等等。不同的是PDF文件是按照二进制流的方式保存的，而HTML文件则是文本方式保存的。
第三章HTML转PDF程序的设计与实现3.1 程序功能分析与设计
3.1.1 功能分析
1.系统结构图
设计的系统结构图如图3-1所示：
互联网
计算机
服务器程序客户端网页
计算机客户端网页
图3-1 系统结构图
详细描述：
互联网：通过互联网传递文档和请求。
计算机：服务器端和客户端都需在计算机上运行。
服务器端程序：程序在服务器端运行。
客户端网页：客户端网页上发送请求和接受文档等动作。
2.功能层次图
HTML转换PDF
服务端程序客户端网页
接受请求转
换
文
档
发
送
文
档
下
载
文
档
发
送
文
档
图 3-2系统功能层次图
详细描述：
服务器端程序
（1）接受请求
对于客户端网页上发送的请求进行接受，并响应。
（2）转换文档
对于客户端网页所对应的网站IP地址进行转换文档。
（3）发送文档
向发起请求的客户端发送转换后的文档。
客户端网页
（1）发送请求
发送需要转换该网页成文档的请求。
（2）下载文档
选择保存网页发送过来的文档的保存地址。
3.1.2流程图
当用户访问网页并点击转换文档的链接时，这时网页就把这个请求发送至服务器端，服务器端响应该请求并接受请求。然后解析该网页的url，调用PD4ML工具包将该网页的url转换成PDF格式的字节数组数据量，并将该流写入到HttpseverletResponse 中的输出流中，最后将该流发送至客户端，客户端就可以选择下载该网页转换后的PDF 文档了。
系统的流程图如图3-3所示：
开始
客户端访问网页
点击转换链接
发送请求
服务器端接受请求
获取该页的url
使用pd4ml工具包通过该页的url转化为PDF格式的字节数组输出流
将该流写入到HttpServletRespons e中的输出流
客户端通过该输出流保存PDF文档
结束
图 3-3 系统流程图
3.1.3用户界面
对于用户来说，界面首先是一个用户和系统进行人机交互的过程，用户界面的友好有时候直接影响到软件整体影响。本设计的界面是友好的，对于没有计算机操作基础的人群非常适合。操作简便，链接一目了然，所以界面的问题作者不担心这个问题。用户的操作界面如图3-4所示：
图 3-4 用户界面
3.2 编码实现
3.2.1 程序开发包
PD4ML是一个功能强大的PDF生成工具，使用HTML和CSS（层叠样式表）的页面布局和内容定义格式，它可以让用户可轻松添加PDF生成功能的终端产品。PD4ML主要特点：
?URL或HTML字符串转换为PDF文件或字节流。
?联和外部CSS样式表的支持
?设置PDF页面格式和方向
?控制页边距
?定义PDF页眉和页脚HTML（包括图像和页码）
?嵌入和使用的True Type型，开放型的字体。
?支持大多数亚洲，中东，欧洲和拉丁字符集
?生成内部和外部的超链接
?控制选定的页面页眉/页脚外观上
?嵌入媒体或文件附件
?打开PDF加密和指定文件的安全性限制。PD4ML可以有效保护您的PDF文档40-bit/128-bit加密。您可以禁用打印，修改或提取的文本内容，您可以用密码锁定您的PDF。
?从命名的锚或
的 - 结构生成PDF书签
?生成表的内容基于
- 结构“
?自定义页面背景（颜色或背景图片）
?水印页
?覆盖硬编码风格与额外的CSS样式表文件
?提供基本支持PDF表单
?HTML到图像的转换
Pd4mljar基本流程：
●设置虚拟浏览器网页的框宽度。如图3-5所示：
图3-5设置虚拟浏览器网页的框宽度
●选择目标文件格式并且让它横向旋转以便打印成A4纸的大小。如图3-6所示：
图 3-6 设置目标文件格式
●定义PDF页边距。如图3-7所示：
图 3-7 定义PDF页边距
●抑制HTML源文件可能出现的外边距。如图3-8所示：