JS - 使用jsPDF-AutoTable库生成带表格的PDF文件1(安装配置、基本属性设置)
我在之前的文章中介绍了如何使用 jsPDF 库来生成 pdf 文件(点击查看)。而 jsPDF-AutoTable 作为一个 jsPDF 的扩展库,可以很方便地在 pdf 文件中添加表格,并且可以自由修改表格样式和皮肤。
一、安装与使用
1,安装配置
(1)首先到它的 GitHub 主页上将代码库下载到本地:https://github.com/simonbengtsson/jsPDF-AutoTable
(2)将 dist 文件夹里的 jspdf.plugin.autotable.js 复制到项目中来,并在页面上引用即可。
<script src="jspdf.plugin.autotable.js" charset="utf-8"></script>
2,基本用法
(1)下面生成一个具有简单表格的 pdf 文件,具体效果如图所示:

(2)样例代码如下,列头和表格数据我们可以使用简单的数组形式:
(3)也可使用如下这种数组中包含对象的形式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jspdf.min.js" charset="utf-8"></script> <script src="jspdf.plugin.autotable.js" charset="utf-8"></script> <script type="text/javascript"> //页面初始化 function init() { //表格列头 var columns = ["ID", "Name", "Country"]; //表格数据 var rows = [ [1, "Shaw", "Tanzania"], [2, "Nelson", "Kazakhstan"], [3, "Garcia", "Madagascar"] ]; //只支持pt(不支持 mm 或 in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows); doc.save('table.pdf'); } </script> </head> <body onload="init()"> </body> </html>
(3)也可使用如下这种数组中包含对象的形式:
//表格列头 var columns = [ {title: "ID", dataKey: "id"}, {title: "Name", dataKey: "name"}, {title: "Country", dataKey: "country"} ]; //表格数据 var rows = [ {"id": 1, "name": "Shaw", "country": "Tanzania"}, {"id": 2, "name": "Nelson", "country": "Kazakhstan"}, {"id": 3, "name": "Garcia", "country": "Madagascar"} ]; //只支持pt(不支持 mm 或 in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows); doc.save('table.pdf');
二、属性设置
1,主题设置
(1)使用 theme 属性可以设置表格的主题样式,AutoTable 默认提供了如下三种主题:
- striped:行背景色交替显示(默认值)
- grid:线框形式
- plain:无样式
(2)下面是使用 grid 样式的效果:

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { theme: 'grid' }); doc.save('table.pdf');
(3)下面是使用 plain 样式的效果:

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { theme: 'plain' }); doc.save('table.pdf');
2,设置表格宽度
(1)通过 tableWidth 属性我们可以改变表格的宽度,具体有如下几种可选值:
- auto:自动撑满整个页面宽度(默认值)
- wrap:在内容可以显示完全的情况下,尽可能减小宽度
- 具体数值:设置一个指定的宽度(如:200)
(2)下面是将宽度设为 wrap 的样例:

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { tableWidth: 'wrap' //表格宽度设置 }); doc.save('table.pdf');
3,设置表格位置(y 坐标)
使用 startY 属性可以设置表格的 Y 坐标,我们可以指定一个具体数字,也可以使用 false 表示使用默认值。

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { startY: 0 }); doc.save('table.pdf');
4,设置表格边距
(1)可以统一设置表格各个方向的边距

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { startY: 0, margin: 0 }); doc.save('table.pdf');
(2)也可以分别设置各个方向的边距。

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { startY: 0, margin: {left:30, right:60} }); doc.save('table.pdf');
5,设置表格跨越多个页面时的行为(是否另起一页)
(1)使用 pageBreak 属性可以设置表格在需要跨页时的行为,这个属性在文档中存在多个表格的情况下比较常用到,该属性有如下可选值:
- auto:它只会在下一行不匹配时添加一个新页面(默认值)。
- always:每个表格将总是在一个新页面上开始。
- avoid:如果没有足够的空间容纳当前页面上的整个表格,它将在新页面上启动。如果空间足够,则不会添加新页面。
(2)下面是默认的 auto 效果:

var doc = new jsPDF('p', 'pt'); //添加第一个表格 doc.autoTable(columns, rows, { }); let first = doc.autoTable.previous; //添加第二个表格 doc.autoTable(columns, rows, { startY: first.finalY + 10, pageBreak: "auto" }); doc.save('table.pdf');
(3)下面是 always 效果:

var doc = new jsPDF('p', 'pt'); //添加第一个表格 doc.autoTable(columns, rows, { }); let first = doc.autoTable.previous; //添加第二个表格 doc.autoTable(columns, rows, { startY: first.finalY + 10, pageBreak: "always" }); doc.save('table.pdf');
6,设置是否显示表头
(1)使用 showHeader 属性可以设置表格是否显示表头,这个属性在表格跨越多页的情况下比较常用到,该属性有如下可选值:- everyPage:每一页都显示表头(默认值)
- firstPage:仅第一页显示表头
- never:每一页都不显示表头
(2)下面是仅第一页显示表头的效果:

var doc = new jsPDF('p', 'pt'); //添加第一个表格 doc.autoTable(columns, rows, { showHeader: 'firstPage' }); doc.save('table.pdf');
7,设置表格边框颜色
(1)使用 0 ~ 255 灰度形式。

var doc = new jsPDF('p', 'pt'); //添加第一个表格 doc.autoTable(columns, rows, { tableLineColor: 200, //边框颜色 tableLineWidth: 2 //边框粗细 }); doc.save('table.pdf');
(2)使用 RGB 形式。

var doc = new jsPDF('p', 'pt'); //添加第一个表格 doc.autoTable(columns, rows, { tableLineColor: [0, 255, 0], //边框颜色 tableLineWidth: 2 //边框粗细 }); doc.save('table.pdf');