前端生成PDF 文件教程+在线demo案例

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 

PDF 简介

PDF 全称Portable Document Format (PDF)（便携文档格式）,该格式的显示与操作系统、分辨率、设备等因素没有关系，不论是在Windows，Unix还是在苹果公司的Mac OS操作系统中PDF格式都通用。Adobe公司在1993年为了文档传输创造了这个文件格式，这个格式使用PostScript页面描述语言，适用于列印图像和文字（无论是在纸、胶片或非物质的CRT都可）。PDF是基于页面描述语言。它既可以像程序代码一样具有可读性，又能表示出可任意放大和缩小的矢量图。

PDF文件格式可以将文字、字型、格式、颜色及独立于设备和分辨率的图形图像等封装在一个文件中，该格式文件还可以包含超文本链接、声音和动态影像等电子信息，支持特长文件，集成度和安全可靠性都较高。

为什么PDF 文件能够如此盛行

很多人所吐槽，说PDF 既不能编辑，也不好复制内容，更无法直接转换成Word，为什么要用PDF来传输资料呢？

殊不知，大家吐槽的缺点，正是因为它优点的过于强大而引起的。

PDF的产生之初的目的，是为了适应纸媒的印刷行业。PDF 原本并非为小屏幕电子阅读设计的文件标准，它来自于印刷——基于纸张大小进行的排版。我们可以把它当成纸质文稿的电子化，非电子文本，而是电子化的印刷了东西的纸张。它存在的目的是为了实现批量精准的印刷，保证在多个屏幕，多个系统，多终端中文件格式都能保存相对位置，展示布局都不会出现格式错乱，保证了打印到纸张上的格式完全一致，而不会内容格式面目而非。

试想，如果我们需要打印一份保险认购书，保险业务人员使用 iPad 打印的PDF 文件和使用PC 电脑打印出来的文件格式相差很大，页数不一致，换行不一致，那到底如何保证保险认购书的法律效应呢。 一份保单可以有多种格式，那就无法信任任何一份保单了。正如你面前有多个时钟，我们也就无法获取当前准确时间。

如果你实现过类似于打印页面，打印表单等功能，你可能会深有体会这其中的坑，吃过的苦只有自己清楚。

因为将网页保存为PDF 让用户预览或下载不失为一种保证格式在各终端一致的好方法。

除此之外，PDF 的优势除了跨平台，兼容性高，也 最大程度降低了查看成本 ，终端用户不需要安装一套沉重全功能的Adobe才能读到 PDF文件，只要客户机器上有浏览器就可以查看PDF内容。这也就是终端用户无论是手机端 iOS, Android，还是老的PC，新的PC机器都可以随时随地打开PDF 文件，支持阅读的方式非常多样便捷，而不是像Excel文件必须要office才能够读取。

再加上PDF 也可以进行小范围的编辑，安全属性的设置，如加密，加密打印等功能，实用性也是上升到另一个层次。

前端生成PDF 文件应用场景

随着移动互联网的发展，手机端增长需求暴增，互联网系统越多越多，新型系统都是为了更方便快捷解决用户而应用而生的，而用户需求也随着技术的发展悄然发生改变。

"全民皆网民"的阶段，再不是基本功能满足就可以站住脚的时代，用户体验及交互需求更加迫切，使得从机器时代的设计到人性化的设计，更加易用性。

前后端分离的技术架构畅行，让专业的人做专业的事情，开发更加高效畅通，因此在前端生成和展示PDF文件的需求也是比较普遍，我们总结一下PDF的常见应用场景：

1. 项目中预览PDF 文件，并且提供搜索能力
2. 手机端预览PDF 文件
3. 用户填写表单，生成PDF 文件，用户直接下载保存
4. 线上生成PDF 合同，打印

简单总结生成 PDF 的三类需求：

1. 在