JS - 使用jsPDF-AutoTable库生成带表格的PDF文件2(全局、局部样式修改)
三、表格样式修改(整体设置)
1,修改单元格内边距
(1)统一设置四个方向的边距

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { cellPadding: 0.5 } }); doc.save('table.pdf');
(2)分别设置四个方向的边距。

//方式一 var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { cellPadding: [5, 0.5, 10, 0.5]} }); doc.save('table.pdf'); //方式二 var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { cellPadding:{top: 5, right: 0.5, bottom: 10, left: 0.5}} }); doc.save('table.pdf');
2,修改文字大小

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: {fontSize: 14} }); doc.save('table.pdf');
3,修改文字字体
有 helvetica(默认值)、times、courier 这三个可选值。

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { font: 'times'} }); doc.save('table.pdf');
4,修改文字样式
有 normal(默认值)、bold、italic、bolditalic 这四个可选值。

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { fontStyle: 'bolditalic' } }); doc.save('table.pdf');
5,文字截断与换行
(1)通过 overflow 这个样式属性可以设置当单元格内容超长时如何处理,具体有如下几种可选值:
- visible:超出部分仍然显示,即会渲染到表格外部
- hidden:超出部分直接隐藏
- ellipsize:超出部分用省略号代替(默认值)
- linebreak:自动换行
(2)下面是一个设置成自动换行的效果:

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { fontSize: 15, overflow: 'linebreak' } }); doc.save('table.pdf');
6,表格边框线条

//方式一(0~255灰度形式) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { lineColor: 200, lineWidth: 1, } }); doc.save('table.pdf'); //方式二(RGB形式) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { lineColor: [255, 255, 255], lineWidth: 1, } }); doc.save('table.pdf');
7,修改背景色

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { theme: 'plain', styles: { fillColor: [255, 255, 0] } }); doc.save('table.pdf');
8,修改文字颜色

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { textColor: [0, 255, 0] } }); doc.save('table.pdf');
9,对齐方式

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: { halign: 'center', // left, center, right valign: 'middle', // top, middle, bottom } }); doc.save('table.pdf');
四、表格样式修改(单独设置)
前面我们通过 styles 属性来对表格样式进行全局设置。我们也可以对表头、或指定列等单独进行样式设置,它们的优先级如下:
- Default styles <- theme styles <- styles <- headerStyles & bodyStyles <- alternateRowStyles & columnStyles
1,设置指定列的样式

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { columnStyles: { id: {columnWidth:50, fontStyle: 'bolditalic', textColor: [255, 0, 0]}, name: {columnWidth:'wrap'} }, }); doc.save('table.pdf');
2,设置内容区域(已经交替行)的样式

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { alternateRowStyles : { fillColor: [255, 255, 0] }, bodyStyles: { fillColor: [255, 0, 0] } }); doc.save('table.pdf');
3,设置表头样式

var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { headerStyles: { fillColor: [255, 0, 0] } }); doc.save('table.pdf');