examples.js

/*
 |--------------------------------------------------------------------------
 | This file contains examples of how to use this plugin
 |--------------------------------------------------------------------------
 |
 | To see what the documents generated by these examples looks like you can open
 | ´examples.html´ or go to http://simonbengtsson.github.io/jsPDF-AutoTable.
 |
 | To make it possible to view each example in examples.html some extra code
 | is added to the examples below. For example they return their jspdf
 | doc instance and gets generated data from the library faker.js. See simple.html
 | for a minimal example.
 */

var faker = window.faker

var examples = {}
window.examples = examples

// Basic - shows what a default table looks like
examples.basic = function () {
  var doc = new jsPDF()

  // From HTML
  doc.autoTable({ html: '.table' })

  // From Javascript
  var finalY = doc.lastAutoTable.finalY || 10
  doc.text('From javascript arrays', 14, finalY + 15)
  doc.autoTable({
    startY: finalY + 20,
    head: [['ID', 'Name', 'Email', 'Country', 'IP-address']],
    body: [
      ['1', 'Donna', 'dmoore0@furl.net', 'China', '211.56.242.221'],
      ['2', 'Janice', 'jhenry1@theatlantic.com', 'Ukraine', '38.36.7.199'],
      [
        '3',
        'Ruth',
        'rwells2@constantcontact.com',
        'Trinidad and Tobago',
        '19.162.133.184',
      ],
      ['4', 'Jason', 'jray3@psu.edu', 'Brazil', '10.68.11.42'],
      ['5', 'Jane', 'jstephens4@go.com', 'United States', '47.32.129.71'],
      ['6', 'Adam', 'anichols5@com.com', 'Canada', '18.186.38.37'],
    ],
  })

  finalY = doc.lastAutoTable.finalY
  doc.text('From HTML with CSS', 14, finalY + 15)
  doc.autoTable({
    startY: finalY + 20,
    html: '.table',
    useCss: true,
  })

  return doc
}

// Minimal - shows how compact tables can be drawn
examples.minimal = function () {
  var doc = new jsPDF()
  doc.autoTable({
    html: '.table',
    tableWidth: 'wrap',
    styles: { cellPadding: 0.5, fontSize: 8 },
  })
  return doc
}

// Long data - shows how the overflow features looks and can be used
examples.long = function () {
  var doc = new jsPDF('l')

  var head = headRows()
  head[0]['text'] = 'Text'
  var body = bodyRows(4)
  body.forEach(function (row) {
    row['text'] = faker.lorem.sentence(100)
  })

  doc.text("Overflow 'ellipsize' with one column with long content", 14, 20)
  doc.autoTable({
    head: head,
    body: body,
    startY: 25,
    // Default for all columns
    styles: { overflow: 'ellipsize', cellWidth: 'wrap' },
    // Override the default above for the text column
    columnStyles: { text: { cellWidth: 'auto' } },
  })
  doc.text(
    "Overflow 'linebreak' (default) with one column with long content",
    14,
    doc.lastAutoTable.finalY + 10
  )
  doc.autoTable({
    head: head,
    body: body,
    startY: doc.lastAutoTable.finalY + 15,
    rowPageBreak: 'auto',
    bodyStyles: { valign: 'top' },
  })

  return doc
}

// Content - shows how tables can be integrated with any other pdf content
examples.content = function () {
  var doc = new jsPDF()

  doc.setFontSize(18)
  doc.text('With content', 14, 22)
  doc.setFontSize(11)
  doc.setTextColor(100)

  // jsPDF 1.4+ uses getWidth, <1.4 uses .width
  var pageSize = doc.internal.pageSize
  var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth()
  var text = doc.splitTextToSize(faker.lorem.sentence(45), pageWidth - 35, {})
  doc.text(text, 14, 30)

  doc.autoTable({
    head: headRows(),
    body: bodyRows(40),
    startY: 50,
    showHead: 'firstPage',
  })

  doc.text(text, 14, doc.lastAutoTable.finalY + 10)

  return doc
}

// Multiple - shows how multiple tables can be drawn both horizontally and vertically
examples.multiple = function () {
  var doc = new jsPDF()
  doc.text('Multiple tables', 14, 20)

  doc.autoTable({ startY: 30, head: headRows(), body: bodyRows(25) })

  var pageNumber = doc.internal.getNumberOfPages()

  doc.autoTable({
    columns: [
      { dataKey: 'id', header: 'ID' },
      { dataKey: 'name', header: 'Name' },
      { dataKey: 'expenses', header: 'Sum' },
    ],
    body: bodyRows(15),
    startY: 240,
    showHead: 'firstPage',
    styles: { overflow: 'hidden' },
    margin: { right: 107 },
  })

  doc.setPage(pageNumber)

  doc.autoTable({
    columns: [
      { dataKey: 'id', header: 'ID' },
      { dataKey: 'name', header: 'Name' },
      { dataKey: 'expenses', header: 'Sum' },
    ],
    body: bodyRows(15),
    startY: 240,
    showHead: 'firstPage',
    styles: { overflow: 'hidden' },
    margin: { left: 107 },
  })

  for (var j = 0; j < 3; j++) {
    doc.autoTable({
      head: headRows(),
      body: bodyRows(),
      startY: doc.lastAutoTable.finalY + 10,
      pageBreak: 'avoid',
    })
  }

  return doc
}

// Header and footers - shows how header and footers can be drawn
examples['header-footer'] = function () {
  var doc = new jsPDF()
  var totalPagesExp = '{total_pages_count_string}'

  doc.autoTable({
    head: headRows(),
    body: bodyRows(40),
    willDrawPage: function (data) {
      // Header
      doc.setFontSize(20)
      doc.setTextColor(40)
      if (base64Img) {
        doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10)
      }
      doc.text('Report', data.settings.margin.left + 15, 22)
    },
    didDrawPage: function (data) {
      // Footer
      var str = 'Page ' + doc.internal.getNumberOfPages()
      // Total page number plugin only available in jspdf v1.0+
      if (typeof doc.putTotalPages === 'function') {
        str = str + ' of ' + totalPagesExp
      }
      doc.setFontSize(10)

      // jsPDF 1.4+ uses getHeight, <1.4 uses .height
      var pageSize = doc.internal.pageSize
      var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight()
      doc.text(str, data.settings.margin.left, pageHeight - 10)
    },
    margin: { top: 30 },
  })

  // Total page number plugin only available in jspdf v1.0+
  if (typeof doc.putTotalPages === 'function') {
    doc.putTotalPages(totalPagesExp)
  }

  return doc
}

// Minimal - shows how compact tables can be drawn
examples.defaults = function () {
  // Global defaults
  // (would apply to all documents if more than one were created)
  jsPDF.autoTableSetDefaults({
    headStyles: { fillColor: 0 },
  })

  var doc = new jsPDF()

  doc.text('Global options (black header)', 15, 20)
  doc.autoTable({ head: headRows(), body: bodyRows(5), startY: 25 })

  // Document defaults
  jsPDF.autoTableSetDefaults(
    {
      headStyles: { fillColor: [155, 89, 182] }, // Purple
      didDrawPage: function (data) {
        var finalY = doc.lastAutoTable.finalY + 15
        var leftMargin = data.settings.margin.left
        doc.text('Default options (purple header)', leftMargin, finalY)
      },
    },
    doc
  )

  var startY = doc.lastAutoTable.finalY + 20
  doc.autoTable({ head: headRows(), body: bodyRows(5), startY: startY })

  // Reset defaults
  doc.autoTableSetDefaults(null)
  jsPDF.autoTableSetDefaults(null)

  var finalY = doc.lastAutoTable.finalY
  doc.text('After reset (blue header)', 15, finalY + 15)
  doc.autoTable({ head: headRows(), body: bodyRows(5), startY: finalY + 20 })

  return doc
}

// Column styles - shows how tables can be drawn with specific column styles
examples.colstyles = function () {
  var doc = new jsPDF()
  doc.autoTable({
    head: headRows(),
    body: bodyRows(),
    showHead: false,
    // Note that the "id" key below is the same as the column's dataKey used for
    // the head and body rows. If your data is entered in array form instead you have to
    // use the integer index instead i.e. `columnStyles: {5: {fillColor: [41, 128, 185], ...}}`
    columnStyles: {
      id: { fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold' },
    },
  })

  return doc
}

// Col spans and row spans
examples.spans = function () {
  var doc = new jsPDF('p', 'pt')
  doc.text('Rowspan and colspan', 40, 50)

  var raw = bodyRows(40)
  var body = []

  for (var i = 0; i < raw.length; i++) {
    var row = []
    for (var key in raw[i]) {
      row.push(raw[i][key])
    }
    if (i % 5 === 0) {
      row.unshift({
        rowSpan: 5,
        content: i / 5 + 1,
        styles: { valign: 'middle', halign: 'center' },
      })
    }
    body.push(row)
  }

  doc.autoTable({
    startY: 60,
    head: [
      [
        {
          content: 'People',
          colSpan: 5,
          styles: { halign: 'center', fillColor: [22, 160, 133] },
        },
      ],
    ],
    body: body,
    theme: 'grid',
  })
  return doc
}

// Themes - shows how the different themes looks
examples.themes = function () {
  var doc = new jsPDF()

  doc.text('Theme "striped"', 14, 16)
  doc.autoTable({ head: headRows(), body: bodyRows(5), startY: 20 })

  doc.text('Theme "grid"', 14, doc.lastAutoTable.finalY + 10)
  doc.autoTable({
    head: headRows(),
    body: bodyRows(5),
    startY: doc.lastAutoTable.finalY + 14,
    theme: 'grid',
  })

  doc.text('Theme "plain"', 14, doc.lastAutoTable.finalY + 10)
  doc.autoTable({
    head: headRows(),
    body: bodyRows(5),
    startY: doc.lastAutoTable.finalY + 14,
    theme: 'plain',
  })

  return doc
}

// Nested tables
examples.nested = function () {
  var doc = new jsPDF()
  doc.text('Nested tables', 14, 16)

  var nestedTableHeight = 100
  var nestedTableCell = {
    content: '',
    // Dynamic height of nested tables are not supported right now
    // so we need to define height of the parent cell
    styles: { minCellHeight: 100 },
  }
  doc.autoTable({
    theme: 'grid',
    head: [['2019', '2020']],
    body: [[nestedTableCell]],
    foot: [['2019', '2020']],
    startY: 20,
    didDrawCell: function (data) {
      if (data.row.index === 0 && data.row.section === 'body') {
        doc.autoTable({
          startY: data.cell.y + 2,
          margin: { left: data.cell.x + 2 },
          tableWidth: data.cell.width - 4,
          styles: {
            maxCellHeight: 4,
          },
          columns: [
            { dataKey: 'id', header: 'ID' },
            { dataKey: 'name', header: 'Name' },
            { dataKey: 'expenses', header: 'Sum' },
          ],
          body: bodyRows(),
        })
      }
    },
  })

  return doc
}

// Custom style - shows how custom styles can be applied
examples.custom = function () {
  var doc = new jsPDF()
  doc.autoTable({
    head: headRows(),
    body: bodyRows(),
    foot: headRows(),
    margin: { top: 37 },
    tableLineColor: [231, 76, 60],
    tableLineWidth: 1,
    styles: {
      lineColor: [44, 62, 80],
      lineWidth: 1,
    },
    headStyles: {
      fillColor: [241, 196, 15],
      fontSize: 15,
    },
    footStyles: {
      fillColor: [241, 196, 15],
      fontSize: 15,
    },
    bodyStyles: {
      fillColor: [52, 73, 94],
      textColor: 240,
    },
    alternateRowStyles: {
      fillColor: [74, 96, 117],
    },
    // Note that the "email" key below is the same as the column's dataKey used for
    // the head and body rows. If your data is entered in array form instead you have to
    // use the integer index instead i.e. `columnStyles: {5: {fillColor: [41, 128, 185], ...}}`
    columnStyles: {
      email: {
        fontStyle: 'bold',
      },
      city: {
        // The font file mitubachi-normal.js is included on the page and was created from mitubachi.ttf
        // with https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
        // refer to https://github.com/MrRio/jsPDF#use-of-utf-8--ttf
        font: 'mitubachi',
      },
      id: {
        halign: 'right',
      },
    },
    allSectionHooks: true,
    // Use for customizing texts or styles of specific cells after they have been formatted by this plugin.
    // This hook is called just before the column width and other features are computed.
    didParseCell: function (data) {
      if (data.row.index === 5) {
        data.cell.styles.fillColor = [40, 170, 100]
      }

      if (
        (data.row.section === 'head' || data.row.section === 'foot') &&
        data.column.dataKey === 'expenses'
      ) {
        data.cell.text = '' // Use an icon in didDrawCell instead
      }

      if (data.column.dataKey === 'city') {
        data.cell.styles.font = 'mitubachi'
        if (data.row.section === 'head') {
          data.cell.text = 'シティ'
        }
        if (data.row.index === 0 && data.row.section === 'body') {
          data.cell.text = 'とうきょう'
        }
      }
    },
    // Use for changing styles with jspdf functions or customize the positioning of cells or cell text
    // just before they are drawn to the page.
    willDrawCell: function (data) {
      if (data.row.section === 'body' && data.column.dataKey === 'expenses') {
        if (data.cell.raw > 750) {
          doc.setTextColor(231, 76, 60) // Red
        }
      }
    },
    // Use for adding content to the cells after they are drawn. This could be images or links.
    // You can also use this to draw other custom jspdf content to cells with doc.text or doc.rect
    // for example.
    didDrawCell: function (data) {
      if (
        (data.row.section === 'head' || data.row.section === 'foot') &&
        data.column.dataKey === 'expenses' &&
        coinBase64Img
      ) {
        doc.addImage(
          coinBase64Img,
          'PNG',
          data.cell.x + 5,
          data.cell.y + 2,
          5,
          5
        )
      }
    },
    // Use this to add content to each page that has the autoTable on it. This can be page headers,
    // page footers and page numbers for example.
    didDrawPage: function (data) {
      doc.setFontSize(18)
      doc.text('Custom styling with hooks', data.settings.margin.left, 22)
      doc.setFontSize(12)
      doc.text(
        'Conditional styling of cells, rows and columns, cell and table borders, custom font, image in cell',
        data.settings.margin.left,
        30
      )
    },
  })
  return doc
}

// Custom style - shows how custom styles can be applied
examples.borders = function () {
  var doc = new jsPDF()
  doc.autoTable({
    head: headRows(),
    body: bodyRows(3),
    foot: [
      [
        {
          content: 'ID',
          dataKey: 'id',
          styles: {
            fillColor: [255, 0, 0],
            lineWidth: 1,
            lineColor: 'black',
          },
        },
        {
          content: 'Name',
          dataKey: 'name',
          styles: {
            fillColor: [0, 255, 0],
          },
        },
        {
          content: 'Email',
          dataKey: 'email',
          styles: {
            fillColor: [0, 0, 255],
            lineWidth: 2,
            lineColor: 'yellow',
          },
        },
        {
          content: 'City',
          dataKey: 'city',
          styles: {
            fillColor: [0, 255, 0],
            lineWidth: 0.5,
          },
        },
        {
          content: 'Sum',
          dataKey: 'sum',
          styles: {
            textColor: 'white',
            fillColor: [255, 0, 0],
            lineColor: 'black',
            lineWidth: {
              right: 2,
              bottom: 3,
              top: 1,
              left: 6,
            },
          },
        },
      ],
    ],
    margin: { top: 40 },
    theme: 'plain',
    headStyles: {
      fillColor: '#f1c40f',
      fontSize: 15,
      lineWidth: {
        top: 1
      }
    },
    footStyles: {
      fillColor: [241, 196, 15],
      fontSize: 15,
    },
    // Note that the "email" key below is the same as the column's dataKey used for
    // the head and body rows. If your data is entered in array form instead you have to
    // use the integer index instead i.e. `columnStyles: {5: {fillColor: [41, 128, 185], ...}}`
    columnStyles: {
      email: {
        fontStyle: 'bold',
      },
      city: {
        // The font file mitubachi-normal.js is included on the page and was created from mitubachi.ttf
        // with https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
        // refer to https://github.com/MrRio/jsPDF#use-of-utf-8--ttf
        font: 'mitubachi',
      },
      id: {
        halign: 'right',
      },
    },
    allSectionHooks: true,
    // Use for customizing texts or styles of specific cells after they have been formatted by this plugin.
    // This hook is called just before the column width and other features are computed.
    didParseCell: function (data) {
      if (
        data.row.section === 'head' &&
        ['name', 'city'].includes(data.column.dataKey)
      ) {
        data.cell.styles.lineColor = 'black'
        data.cell.styles.lineWidth = {
          bottom: 1,
        }
      }
      if (data.row.section === "body" && data.row.index === 1 && data.cell === data.row.cells[1]) {
        data.cell.styles.fillColor = '#f1c40f' // cell background color
        data.cell.styles.lineColor = 'red' // cell border color
        data.cell.styles.lineWidth = {
          bottom: 1, // only bottom border will be painted
        }
      }
    },
    // Use this to add content to each page that has the autoTable on it. This can be page headers,
    // page footers and page numbers for example.
    didDrawPage: function (data) {
      doc.setFontSize(18)
      doc.text('Custom borders showcase', data.settings.margin.left, 22)
      doc.setFontSize(12)
      doc.text(
        'Borders are drawn just at the edge of the cell, which means that half of the border is in the cell and the other half is outside.',
        data.settings.margin.left,
        30,
        { maxWidth: 180 }
      )
    },
  })
  return doc
}

// Split columns - shows how the overflowed columns split into pages
examples.horizontalPageBreak = function () {
  var doc = new jsPDF('l')

  var head = headRows()
  head[0].region = 'Region'
  head[0].country = 'Country'
  head[0].zipcode = 'Zipcode'
  head[0].phone = 'Phone'
  // head[0].timeZone = 'Timezone';
  head[0]['text'] = 'Text'
  var body = bodyRows(4)
  body.forEach(function (row) {
    row['text'] = faker.lorem.sentence(100)
    row['zipcode'] = faker.address.zipCode()
    row['country'] = faker.address.country()
    row['region'] = faker.address.state()
    row['phone'] = faker.phone.phoneNumber()
    // row['timeZone'] = faker.address.timeZone();
  })

  doc.text('Split columns across pages if not fit in a single page', 14, 20)
  doc.autoTable({
    head: head,
    body: body,
    startY: 25,
    // split overflowing columns into pages
    horizontalPageBreak: true,
    // repeat this column in split pages
    // horizontalPageBreakRepeat: 'id',
  })
  return doc
}

// Split columns - shows how the overflowed columns split into pages with a given column repeated
examples.horizontalPageBreakRepeat = function () {
  var doc = new jsPDF('l')

  var head = headRows()
  head[0].region = 'Region'
  head[0].country = 'Country'
  head[0].zipcode = 'Zipcode'
  head[0].phone = 'Phone'
  // head[0].timeZone = 'Timezone';
  head[0]['text'] = 'Text'
  var body = bodyRows(4)
  body.forEach(function (row) {
    row['text'] = faker.lorem.sentence(15)
    row['zipcode'] = faker.address.zipCode()
    row['country'] = faker.address.country()
    row['region'] = faker.address.state()
    row['phone'] = faker.phone.phoneNumber()
    // row['timeZone'] = faker.address.timeZone();
  })

  doc.text(
    'Split columns across pages if not fit in a single page with a column repeated.',
    14,
    20
  )
  doc.autoTable({
    head: head,
    body: body,
    startY: 25,
    // split overflowing columns into pages
    horizontalPageBreak: true,
    // repeat this column in split pages
    horizontalPageBreakRepeat: 'id',
  })
  return doc
}

// Split columns - shows how to alter the behaviour of columns that split into pages
examples.horizontalPageBreakBehaviour = function () {
  var doc = new jsPDF('l')

  var head = headRows()
  head[0].region = 'Region'
  head[0].country = 'Country'
  head[0].zipcode = 'Zipcode'
  head[0].phone = 'Phone'
  head[0].datetime = 'DateTime'
  head[0].text = 'Text'
  var body = bodyRows(50)
  body.forEach(function (row) {
    row['text'] = faker.lorem.sentence(10)
    row['zipcode'] = faker.address.zipCode()
    row['country'] = faker.address.country()
    row['region'] = faker.address.state()
    row['phone'] = faker.phone.phoneNumber()
    row['datetime'] = faker.date.recent()
  })

  doc.text('Split columns across pages if not fit in a single page, showing all the columns first', 14, 20)
  doc.autoTable({
    head: head,
    body: body,
    startY: 25,
    // split overflowing columns into pages
    horizontalPageBreak: true,
    horizontalPageBreakBehaviour: 'immediately',
    // repeat this column in split pages
    //horizontalPageBreakRepeat: 'id',
  })
  return doc
}

/*
 |--------------------------------------------------------------------------
 | Below is some helper functions for the examples
 |--------------------------------------------------------------------------
 */

function headRows() {
  return [
    { id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum' },
  ]
}

function footRows() {
  return [
    { id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum' },
  ]
}

function columns() {
  return [
    { header: 'ID', dataKey: 'id' },
    { header: 'Name', dataKey: 'name' },
    { header: 'Email', dataKey: 'email' },
    { header: 'City', dataKey: 'city' },
    { header: 'Exp', dataKey: 'expenses' },
  ]
}

function data(rowCount) {
  rowCount = rowCount || 10
  var body = []
  for (var j = 1; j <= rowCount; j++) {
    body.push({
      id: j,
      name: faker.name.findName(),
      email: faker.internet.email(),
      city: faker.address.city(),
      expenses: faker.finance.amount(),
    })
  }
  return body
}

function bodyRows(rowCount) {
  rowCount = rowCount || 10
  var body = []
  for (var j = 1; j <= rowCount; j++) {
    body.push({
      id: j,
      name: faker.name.findName(),
      email: faker.internet.email(),
      city: faker.address.city(),
      expenses: faker.finance.amount(),
    })
  }
  return body
}