html表格坐标设置,JS – 使用jsPDF-AutoTable库生成带表格的PDF文件1(安装配置、基本属性设置)…

  • Post author:
  • Post category:其他


我在之前的文章中介绍了如何使用 jsPDF库来生成 pdf文件(点击查看)。而 jsPDF-AutoTable 作为一个 jsPDF的扩展库,可以很方便地在 pdf文件中添加表格,并且可以自由修改表格样式和皮肤。

一、安装与使用

1,安装配置

(2)将 dist文件夹里的 jspdf.plugin.autotable.js 复制到项目中来,并在页面上引用即可。

2,基本用法

(1)下面生成一个具有简单表格的 pdf文件,具体效果如图所示:

de5b174e0e9fbdc200e3a70ae9e0e0c7.png

(2)样例代码如下,列头和表格数据我们可以使用简单的数组形式:

//页面初始化

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’);

}

(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”