JS - PDF文件生成库jsPDF使用详解1(基本用法)
过去生成 PDF 文件都是服务器端的专利,而借助 jsPDF 这个第三方的 JavaScript 库,我们也可以直接在前端生成 PDF 文件。下面通过样例进行演示如何使用。
一、基本介绍
1,什么是 jsPDF?
(1)jsPDF 是一个基于 HTML5 的客户端解决方案,用于在客户端 JavaScript 中生成 PDF 的库。
(2)jsPDF 使用简单,只要引入 jsPDF 库,然后调用内置的方法就可以了。
(3)jsPDF 支持的格式丰富:文本、数字、图形、图片,并且我们还可以自由地编辑标题或者其它类型元素。
2,网站地址
- 官网地址:http://jspdf.com
- GitHub 主页:https://github.com/MrRio/jsPDF
3,安装配置
(1)首先到上面的 GitHub 主页中将整个库下载到本地。
(2)然后在页面中将 dist 文件夹里的 jspdf.min.js 引入进来即可:
<script src="jspdf.min.js" charset="utf-8"></script>
二、基本用法
1,一个简单的样例
下面自动生成一个只包含一个页面的 pdf 文件,并且在页面上添加一行文字。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jspdf.min.js" charset="utf-8"></script> <script type="text/javascript"> //页面初始化 function init() { var doc = new jsPDF(); doc.text(20, 20, 'Welcome to hangge.com'); doc.save('Test.pdf'); } </script> </head> <body onload="init()"> </body> </html>
2,插入新页面

var doc = new jsPDF(); doc.text(20, 20, 'This is page 1'); //增加一个新页面 doc.addPage(); doc.text(20, 20, 'This is page 2'); doc.save('Test.pdf');
3,生成横向的 pdf 文档

var doc = new jsPDF('landscape'); //横向的pdf文档 doc.text(20, 20, 'Welcome to hangge.com'); doc.save('Test.pdf');
4,设置 pdf 文档的元数据(Metadata)
var doc = new jsPDF(); doc.text(20, 20, 'Welcome to hangge.com'); //设置pdf的描述信息(标题、作者等) doc.setProperties({ title: 'hangge.com', subject: 'This is the subject', author: 'hangge', keywords: 'generated, javascript, web 2.0, ajax', creator: 'hangge' }); doc.save('Test.pdf');