jsPDF基础教程：从入门到实战

前言

jsPDF是一个强大的JavaScript库，用于在浏览器中直接生成PDF文档。本教程将详细介绍jsPDF的基本使用方法，通过实际示例帮助开发者快速掌握这一工具。

环境准备

要使用jsPDF，首先需要在HTML页面中引入相关资源：

<script type="text/javascript" src="../dist/jspdf.umd.js"></script>

基础PDF生成

创建简单PDF文档

最基本的PDF生成只需要几行代码：

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, '这是使用JavaScript生成的PDF文档');
doc.save('Test.pdf');

这段代码会创建一个包含两行文本的PDF文档，并自动下载为"Test.pdf"文件。

设置页面方向

jsPDF支持横向和纵向两种页面方向：

// 横向文档
var doc = new jsPDF('landscape');
doc.text(20, 20, '这是横向文档');
doc.save('Landscape.pdf');

文档元数据设置

可以为PDF文档添加丰富的元数据：

var doc = new jsPDF();
doc.text(20, 20, '这个PDF包含完整的元数据信息');

doc.setProperties({
    title: '文档标题',
    subject: '文档主题',
    author: '作者姓名',
    keywords: '关键词1, 关键词2',
    creator: '创建工具'
});

doc.save('WithMetadata.pdf');

文本处理

字体大小设置

var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, '这是标题');

doc.setFontSize(16);
doc.text(20, 30, '这是正文内容');

字体类型设置

jsPDF支持多种字体类型：

var doc = new jsPDF();

doc.setFont("courier");
doc.text(20, 30, '这是Courier字体');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, '这是Times斜体');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, '这是Helvetica粗体');

文本颜色设置

var doc = new jsPDF();

doc.setTextColor(255,0,0);
doc.text(20, 20, '红色文本');

doc.setTextColor(0,255,0);
doc.text(20, 30, '绿色文本');

doc.setTextColor(0,0,255);
doc.text(20, 40, '蓝色文本');

图形绘制

绘制矩形

var doc = new jsPDF();

// 空心矩形
doc.rect(20, 20, 10, 10);

// 实心矩形
doc.rect(40, 20, 10, 10, 'F');

// 圆角矩形
doc.roundedRect(60, 20, 10, 10, 3, 3, 'FD');

绘制线条

var doc = new jsPDF();

// 水平线
doc.line(20, 20, 60, 20);

// 设置线宽
doc.setLineWidth(1.5);
doc.line(20, 30, 60, 30);

// 设置线条颜色
doc.setDrawColor(255,0,0);
doc.line(20, 40, 60, 40);

绘制圆形和椭圆

var doc = new jsPDF();

// 椭圆
doc.ellipse(40, 20, 10, 5);

// 圆形
doc.setFillColor(255,0,0);
doc.circle(80, 20, 5, 'FD');

图片处理

jsPDF支持在PDF中添加图片：

var doc = new jsPDF();

// 添加图片
doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);

// 旋转图片
doc.addImage({
    imageData: imgData,
    angle: -20,
    x: 10,
    y: 78,
    w: 45,
    h: 58
});

自定义字体使用

jsPDF支持使用自定义字体：

var doc = new jsPDF();

// 添加字体文件
doc.addFileToVFS("CustomFont.ttf", fontData);
doc.addFont('CustomFont.ttf', 'CustomFont', 'normal');

// 使用自定义字体
doc.setFont('CustomFont');
doc.text(10, 10, '使用自定义字体显示的文字');

高级功能

多页文档

var doc = new jsPDF();
doc.text(20, 20, '第一页内容');
doc.addPage();
doc.text(20, 20, '第二页内容');
doc.save('MultiPage.pdf');

文本自动换行

var doc = new jsPDF();
var longText = '这是一段很长的文本，会自动根据指定的宽度进行换行处理...';

var lines = doc.splitTextToSize(longText, 100);
doc.text(20, 20, lines);

总结

jsPDF提供了丰富的API用于生成PDF文档，包括文本处理、图形绘制、图片插入等功能。通过本教程的基础示例，开发者可以快速上手并实现各种PDF生成需求。在实际项目中，可以根据具体需求组合使用这些功能，创建出专业级的PDF文档。

对于更高级的需求，jsPDF还支持表格生成、PDF合并等复杂功能，值得进一步探索和学习。