A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/simonbengtsson/jsPDF-AutoTable below:

simonbengtsson/jsPDF-AutoTable: jsPDF plugin for generating PDF tables with javascript

jsPDF-AutoTable - Table plugin for jsPDF

Generate PDF tables with Javascript

This jsPDF plugin adds the ability to generate PDF tables either by parsing HTML tables or by using Javascript data directly. Check out the demo or examples.

Get jsPDF and this plugin by doing one of these things:

import { jsPDF } from 'jspdf'
import { autoTable } from 'jspdf-autotable'

const doc = new jsPDF()

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

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

doc.save('table.pdf')

You can also use the plugin methods directly on the jsPDF documents:

import { jsPDF } from 'jspdf'
import { applyPlugin } from 'jspdf-autotable'

applyPlugin(jsPDF)

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

The third usage option is with downloaded or CDN dist files

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

Checkout more examples in examples.js which is also the source code for the demo documents.

Below is a list of all options supported in the plugin. All of them are used in the examples.

The only thing required is either the html or body option. If you want more control over the columns you can specify the columns property. If columns are not set they will be automatically computed based on the content of the html content or head, body and foot.

CellDef: string|{content: string, rowSpan: number, colSpan: number, styles: StyleDef} Note that cell styles can also be set dynamically with hooks.

ColumnDef: string|{header?: string, dataKey: string} The header property is optional and the values of any content in head will be used if not set. Normally it's easier to use the html or head/body/foot style of initiating a table, but columns can be useful if your body content comes directly from an api or if you would like to specify a dataKey on each column to make it more readable to style specific columns in the hooks or columnStyles.

Usage with colspan, rowspan and inline cell styles:

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

StyleDef:

Color: Either false for transparent, hex string, gray level 0-255 or rbg array e.g. [255, 0, 0] false|string|number|[number, number, number]

Padding: Either a number or object {top: number, right: number, bottom: number, left: number}

border: Either a number or object {top: number, right: number, bottom: number, left: number}

Styles work similar to css and can be overridden by more specific styles. Overriding order:

  1. Theme styles
  2. styles
  3. headStyles, bodyStyles and footStyles
  4. alternateRowStyles
  5. columnStyles

Styles for specific cells can also be applied using either the hooks (see hooks section above) or the styles property on the cell definition object (see content section above).

Example usage of column styles (note that the 0 in the columnStyles below should be dataKey if columns option used)

// Example usage with columnStyles,
autoTable(doc, {
  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'],
  ],
})

// Example usage of columns property. Note that America will not be included even though it exist in the body since there is no column specified for it.
autoTable(doc, {
  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' },
  ],
})

Margin: Either a number or object {top: number, right: number, bottom: number, left: number}

You can customize the content and styling of the table by using the hooks. See the custom styles example for usage of the hooks.

All hooks functions get passed an HookData object with information about the state of the table and cell. For example the position on the page, which page it is on etc.

HookData:

For cell hooks these properties are also passed:

To see what is included in the Table, Row, Column and Cell types, either log them to the console or take a look at src/models.ts

// Example with an image drawn in each cell in the first column
autoTable(doc, {
  didDrawCell: (data) => {
    if (data.section === 'body' && data.column.index === 0) {
      const base64Img = 'data:image/jpeg;base64,iVBORw0KGgoAAAANS...'
      doc.addImage(base64Img, 'JPEG', data.cell.x + 2, data.cell.y + 2, 10, 10)
    }
  },
})

If you want to know something about the last table that was drawn you can use doc.lastAutoTable. It has a doc.lastAutoTable.finalY property among other things that has the value of the last printed y coordinate on a page. This can be used to draw text, multiple tables or other content after a table.

Contributions are always welcome, especially on open issues. If you have something major you want to add or change, please post an issue about it first to discuss it further. Describe the change you are making and ideally link to related issues. If the pull request is a bug fix it is helpful with examples of what did not work before but works now etc.

The workflow for contributing would be something like this:

Don't include updated build files in the pull request since these are auto created during release.

If you don't use Prettier on autosave, please run yarn run format-all before opening your PR

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4