JS - 使用jsPDF-AutoTable库生成带表格的PDF文件1（安装配置、基本属性设置）

2018-11-19 发布：hangge 阅读：6382

我在之前的文章中介绍了如何使用 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）样例代码如下，列头和表格数据我们可以使用简单的数组形式：

<!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');