JS - PDF文件生成库jsPDF使用详解1（基本用法）

作者：hangge | 2018-11-06 08:10

过去生成 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');

其他