当前位置: > > > JS - 使用jsPDF-AutoTable库生成带表格的PDF文件1(安装配置、基本属性设置)

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)样例代码如下,列头和表格数据我们可以使用简单的数组形式:
<!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');
评论0