JS - 使用jsPDF-AutoTable库生成带表格的PDF文件2（全局、局部样式修改）

2018-11-21 发布：hangge 阅读：4720

三、表格样式修改（整体设置）

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