在前端开发场景中，将页面内的HTML表格数据导出为PDF文件是常见需求，jsPDF作为一款成熟的前端PDF生成库，能够高效实现这一功能，无需依赖后端服务即可完成导出操作。
环境准备
首先需要在项目中引入jsPDF库，可以通过CDN引入或者npm安装的方式获取依赖。
CDN引入方式
在HTML文件的<head>标签中添加如下脚本引入jsPDF：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
npm安装方式
如果使用构建工具开发，可以通过npm安装依赖：
npm install jspdf --save
安装完成后在代码中引入：
import jsPDF from 'jspdf';
基础导出实现
假设页面中存在如下结构的HTML表格：
<table id="targetTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>前端开发</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>后端开发</td>
</tr>
</tbody>
</table>
<button id="exportBtn">导出为PDF</button>
接下来编写导出逻辑，核心思路是获取表格数据，然后调用jsPDF的API将数据写入PDF文件：
// 获取导出按钮和表格元素
const exportBtn = document.getElementById('exportBtn');
const table = document.getElementById('targetTable');
exportBtn.addEventListener('click', () => {
// 创建jsPDF实例，设置纸张方向为横向，单位为毫米
const doc = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'a4'
});
// 获取表格的表头数据
const headers = [];
const headerCells = table.querySelectorAll('thead th');
headerCells.forEach(cell => {
headers.push(cell.innerText.trim());
});
// 获取表格的 body 数据
const rows = [];
const bodyRows = table.querySelectorAll('tbody tr');
bodyRows.forEach(row => {
const rowData = [];
const cells = row.querySelectorAll('td');
cells.forEach(cell => {
rowData.push(cell.innerText.trim());
});
rows.push(rowData);
});
// 使用autoTable插件将表格数据写入PDF，autoTable是jsPDF的常用表格插件
// 如果需要使用autoTable，需要先引入对应的插件脚本
doc.autoTable({
head: [headers],
body: rows,
startY: 20, // 表格起始Y坐标
theme: 'grid', // 表格主题，可选striped、grid、plain
styles: { fontSize: 10 }, // 单元格样式
headStyles: { fillColor: [22, 160, 133] } // 表头背景色
});
// 保存PDF文件，指定文件名
doc.save('表格数据.pdf');
});
如果使用autoTable插件，还需要额外引入对应的脚本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.1/jspdf.plugin.autotable.min.js"></script>
样式调整技巧
在实际使用中，可以根据需求调整PDF中表格的样式：
- 设置表格列宽：通过
columnStyles属性指定每一列的宽度，例如columnStyles: { 0: { cellWidth: 30 }, 1: { cellWidth: 20 }, 2: { cellWidth: 40 } } - 添加标题：使用
doc.text方法在表格上方添加标题，例如doc.text('用户信息表', 14, 15); - 处理长文本：设置
styles中的cellPadding和overflow属性处理单元格内过长的内容，避免内容溢出 - 设置页边距：通过
margin属性设置表格的页边距，例如margin: { top: 20, right: 14, bottom: 20, left: 14 }
常见问题处理
中文显示乱码
jsPDF默认不支持中文字体，导出中文内容会出现乱码，需要引入自定义的中文字体文件：
// 加载自定义字体，假设字体文件为simhei.ttf，转换为base64格式后使用
const fontBase64 = '这里放入字体文件的base64编码';
doc.addFileToVFS('simhei.ttf', fontBase64);
doc.addFont('simhei.ttf', 'simhei', 'normal');
doc.setFont('simhei');
表格内容超出页面
如果表格列数较多，可以调整纸张方向为横向，或者缩小字体大小，也可以设置表格自动换行，避免内容被截断。
导出失败问题
检查是否正确引入了jsPDF和autoTable插件，确认获取表格元素的逻辑是否正确，避免获取到空的表格数据导致导出失败。
总结
使用jsPDF库导出HTML表格为PDF的操作整体流程简单，通过获取表格数据、调用PDF生成API、调整样式三个步骤即可完成基础功能。开发者可以根据实际业务需求扩展更多功能，比如添加页眉页脚、导出多页表格、添加图片等内容，满足不同的使用场景。