jspdf-autotable

最新推荐文章于 2024-09-13 22:21:49 发布

眸笑丶

最新推荐文章于 2024-09-13 22:21:49 发布

阅读量4.7k

点赞数 3

分类专栏： jsPdf JavaScript 文章标签： javascript html

原文链接：https://www.npmjs.com/package/jspdf-autotable

版权

JavaScript 同时被 2 个专栏收录

15 篇文章

订阅专栏

jsPdf

3 篇文章

订阅专栏

jspdf-autotable

jsPDF-AutoTable - jsPDF的表格插件

jsPDF-AutoTable - jsPDF的表格插件

使用Javascript生成PDF文档

这个jsPDF插件增加了通过解析HTML表或直接使用Javascript数据生成PDF表的能力。查看这些demo或者examples

安装

通过执行以下操作之一获取jsPDF和此插件

npm install jspdf jspdf-autotable
从github下载jspdf和jspdf-autotable
使用CDN，例如：https://unpkg.com/jspdfandhttps://unpkg.com/jspdf-autotable

使用

import jsPDF from 'jspdf'
import 'jspdf-autotable'

const doc = new jsPDF()

// It can parse html:
// <table id="my-table"><!-- ... --></table>
doc.autoTable({ html: '#my-table' })

// Or use javascript directly:
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Spain'],
    // ...
  ],
})

doc.save('table.pdf')

也可以使用导出的表格方法。这在typescript和其他jsPDF版本中效果更好。

import jsPDF from 'jspdf'
// import jsPDF = require('jspdf') // // 不带esModuleInterop标志的typescript
// import jsPDF from 'yworks-pdf' // 使用 yworks fork
// import jsPDF from 'jspdf/dist/jspdf.node.debug' // for nodejs
import autoTable from 'jspdf-autotable'

const doc = new jsPDF()
autoTable(doc, { html: '#my-table' })
doc.save('table.pdf')

第三个使用选项是下载或CDN dist文件

<script src="jspdf.min.js"></script>
<script src="jspdf.plugin.autotable.min.js"></script>
<script>
  var doc = new jsPDF()
  doc.autoTable({ html: '#my-table' })
  doc.save('table.pdf')
</script>

在examples.js查看更多示例，这也是Demo文档的源代码

设置选项(Options)

下面是插件中支持的所有选项的列表。所有这些都在示例中使用。

内容选项(Content options)

唯一需要的是html或body选项。如果希望对列进行更多控制，可以指定columns属性。如果未设置列，则会根据html内容的内容或head、body和foot自动计算这些列。

html：string|HTMLTableElementA css 选择器(例如 “#table”) 或者一个html表格元素。
head: CellDef[][]例如 [[‘ID’, ‘Name’, ‘Country’]]
body: CellDef[][]例如 [[‘1’, ‘Simon’, ‘Sweden’], [‘2’, ‘Karl’, ‘Norway’]]
foot: CellDef[][]例如 [[‘ID’, ‘Name’, ‘Country’]]
columns: ColumnDef[]例如 [{header: ‘ID’, dataKey: ‘id’}, {header: ‘Name’, dataKey: ‘name’}]。仅当希望对列进行更多控制时才使用此选项。如果未指定，将根据html或head/body/foot中的内容自动生成列。
includeHiddenHtml: boolean = false 如果隐藏了带有display:none的html，则当内容来自html表时，应包括或不包括
CellDef: string|{content: string, rowSpan: number, colSpan: number, styles: StyleDef}请注意，也可以使用挂钩动态设置单元样式。
ColumnDef: string|{header?: string, dataKey: string} header属性是可选的，如果未设置，将使用任何内容的值。通常，使用html或head/body/foot样式启动表更容易，但是如果正文内容直接来自api，或者希望在每列上指定一个数据键，以使钩子或columnStyles中的特定列更具可读性，则列可能会很有用。

与colspan、rowspan和内联单元格样式一起使用：

doc.autoTable({
  body: [
    [{ content: 'Text', colSpan: 2, rowSpan: 2, styles: { halign: 'center' } }],
  ],
})

样式选项(Styling options)

theme: ‘striped’|‘grid’|‘plain’|‘css’ = ‘striped’
styles: StyleDef
headStyles: StyleDef
bodyStyles: StyleDef
footStyles: StyleDef
alternateRowStyles: StyleDef
columnStyles: {&columnDataKey: StyleDef} 请注意，columnDataKey通常是列的索引，但如果使用columns属性初始化内容，则也可以是列的DataKey。

StyleDef:

font: ‘helvetica’|‘times’|‘courier’ = ‘helvetica’
fontStyle: ‘normal’|‘bold’|‘italic’|‘bolditalic’ = ‘normal’
overflow: ‘linebreak’|‘ellipsize’|‘visible’|‘hidden’ = ‘linebreak’
fillColor: Color? = null
textColor: Color? = 20
cellWidth: ‘auto’|‘wrap’|number = ‘auto’
minCellWidth: number? = 10
minCellHeight: number = 0
halign: ‘left’|‘center’|‘right’ = ‘left’
valign: ‘top’|‘middle’|‘bottom’ = ‘top’
fontSize: number = 10
cellPadding: Padding = 10
lineColor: Color = 10
lineWidth: number = 0 // 如果为0，则不绘制边框

Color: 对于透明、十六进制字符串、灰度0-255或rbg数组，为false，例如： [255, 0, 0]false|string|number|[number, number, number]

Padding: 数字或对象{top: number, right: number, bottom: number, left: number}

样式的工作方式类似于css，可以被更具体的样式覆盖。优先顺序:

List item
Theme styles
styles
headStyles,bodyStylesandfootStyles
alternateRowStyles
columnStyles

也可以使用钩子（请参见上面的钩子部分）或单元格定义对象上的样式属性（请参见上面的内容部分）应用特定单元格的样式。

列样式的示例用法（请注意，如果使用了columns选项，则下面columnStyles中的0应为dataKey）

// 列样式的示例用法
doc.autoTable({
  styles: { fillColor: [255, 0, 0] },
  columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green
  margin: { top: 10 },
  body: [
    ['Sweden', 'Japan', 'Canada'],
    ['Norway', 'China', 'USA'],
    ['Denmark', 'China', 'Mexico'],
  ],
})

// columns属性的示例用法。请注意，America将不包括在内，即使它存在于正文中，因为没有为其指定列。
doc.autoTable({
  columnStyles: { europe: { halign: 'center' } }, // European countries centered
  body: [
    { europe: 'Sweden', america: 'Canada', asia: 'China' },
    { europe: 'Norway', america: 'Mexico', asia: 'Japan' },
  ],
  columns: [
    { header: 'Europe', dataKey: 'europe' },
    { header: 'Asia', dataKey: 'asia' },
  ],
})

其他选项(other option)

startY: number = null 表格开始打印的位置（基本上只有第一页的页边距上限值）。
margin: Margin = 40
pageBreak: ‘auto’|‘avoid’|‘always’ 如果设置为avoid，则只有当表格高度大于页面高度时，插件才会将表格拆分为多个页面。
rowPageBreak: ‘auto’|‘avoid’ = ‘auto’ 如果设置为void，则如果行高大于页高，插件将仅将一行拆分为多页。
tableWidth: ‘auto’|‘wrap’|number = ‘auto’
showHead: ‘everyPage’|‘firstPage’|‘never’ = ‘everyPage’’
showFoot: ‘everyPage’|‘lastPage’|‘never’ = ‘everyPage’’
tableLineWidth: number = 0
tableLineColor: Color = 200 表格线条/边框颜色
horizontalPageBreak: boolean = true 如果给定的表格宽度超过页面宽度，则将表格拆分为多个页面
horizontalPageBreakRepeat: string | number = ‘id’ 若要在拆分页面中重复给定列，请在HorizontalPageBreak=true时工作。接受的值是列数据键，如’id’，recordIdor列索引，如0,1。

Margin:输入一个数或一个对象 {top: number, right: number, bottom: number, left: number}

挂钩(Hooks)

可以使用挂钩自定义表的内容和样式。有关挂钩的用法，请参见自定义样式示例。

didParseCell: (HookData) => {}- 插件完成单元格内容解析时调用。可用于替代特定单元格的内容或样式。
willDrawCell: (HookData) => {}- 在绘制单元格或行之前调用。可以用来调用原生jspdf样式函数，如doc.setTextColor或在绘制文本之前更改文本位置等。
didDrawCell: (HookData) => {}- 将单元格添加到页面后调用。可用于绘制附加单元格内容，例如带有doc.addImage的图像、带有doc.addText的附加文本或其他jspdf形状。
didDrawPage: (HookData) => {}- 在插件绘制完页面上的所有内容后调用。可用于添加带有页码的页眉和页脚，或您希望在每个页面上显示的任何其他内容。有一个自动表格。
所有钩子函数都会传递一个HookData对象，其中包含有关表和单元格状态的信息。例如页面上的位置，它在哪一页上等。

HookData:

table: 表格
pageNumber: 编号此表特定的页码
settings: objectParsed用户提供的选项
doche此表的jsPDF文档实例
cursor: { x: number, y: number } 为了绘制每个表，这个插件保持一个光标状态，在那里下一个单元格/行应该被绘制。可以为此光标指定新值，以动态更改单元格和行的绘制方式。

对于单元挂钩，还将传递以下属性：

cell: Cell
row: Row
column: Column
section: ‘head’|‘body’|‘foot’

要查看表、行、列和单元格类型中包含的内容，请将它们记录到控制台或查看src/models.ts

// 在第一列的每个单元格中绘制图像的示例
doc.autoTable({
  didDrawCell: (data) => {
    if (data.section === 'body' && data.column.index === 0) {
      var base64Img = 'data:image/jpeg;base64,iVBORw0KGgoAAAANS...'
      doc.addImage(base64Img, 'JPEG', data.cell.x + 2, data.cell.y + 2, 10, 10)
    }
  },
})

API

doc.autoTable({ /* options */ })
jsPDF.autoTableSetDefaults({ /* … */ }) 用于设置将应用于所有表的全局默认值.

如果您想了解有关最后绘制的表格的信息，可以使用doc.lastAutoTable。它具有一个doc.lastAutoTable.finalY属性以及其他属性，这些属性具有页面上最后一次打印的y坐标的值。这可用于在表格后绘制文本、多个表格或其他内容。

除了导出的表（doc，options）方法外，还可以使用applyPlugin将表api添加到任何jsPDF实例中。

import jsPDF from 'jspdf/dist/jspdf.node.debug'
import { applyPlugin } from 'jspdf-autotable'
applyPlugin(jsPDF)