jsPDF AutoTable - autoTable is not a function

Question

I'm using JSPdf on an Angular app, and I'm attempting to use the JS autotable plugin but I'm running into the JS error

EXCEPTION: Uncaught (in promise): TypeError: doc.autoTable is not a function

TypeError: doc.autoTable is not a function

I have jspdf and jspdf-autotable installed via npm, I confirmed they are in the node modules.

I've imported both plugins this way:

import * as jsPDF from 'jspdf' 
import * as autoTable from 'jspdf-autotable'

and here is my code:

private renderPdf():void{
    let testcolumns = ["TestCol1", "TestCol2"];
    let testrows = [["test item 1", "test item 2"]];
    let doc = new jsPDF();
    doc.autoTable(testcolumns, testrows);
    doc.save('sample.pdf');
}

Is there anything I could be missing here or more code I could provide to help determine the issue?

Thanks!

Aircool

Answer 1

Just delete the 2 first line of imports and add the following lines:

var jsPDF = require('jspdf');
require('jspdf-autotable');

You can see an example here

Kyle

Answer 2

i was geting same issue and I fixed it like this:

import jsPDF from '../../node_modules/jspdf/dist/jspdf.umd.min.js'
import { applyPlugin } from 'jspdf-autotable'
applyPlugin(jsPDF)

i use "jspdf": "^2.3.1", "jspdf-autotable": "^3.5.20" i hope it helps you!

Uprear

This works with Vite also – Dinesen

it work in my vite + tailwind css – Hemimorphic

Answer 3

I was getting same issue and This one is worked for me. i have written it in import as

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

And in function i declared it as

const doc = new jsPDF();

Midgut

import jsPDF from 'jspdf'; import 'jspdf-autotable'; – Chak

Answer 4

i had the same issue today while using https://github.com/SimulatedGREG/electron-vue. i resolved it by adding 'jspdf' and 'jspdf-autotable' to the whitelist array in path-to-project/.vscode

let whiteListedModules = [
  'vue',
  'vue-sweetalert2',
  'element-ui',
  'vue-avatar-component',
  'vue-router', 
  'vue-json-excel',
  'vuex',
  'vue-chart-js',
  'pluralize',   
  'Print',
  'jspdf',
  "jspdf-autotable"
]

Stubble

Answer 5

You can import jsPDF as its normally imported :

import jsPDF from 'jspdf';

and then for the autoTable :

require('jspdf-autotable');

add this ^ inside the function

Constanta

Answer 6

This worked for me:

import jsPDF from 'jspdf';

require('jspdf-autotable');

const tableColumns = ["column1", "Column2", "Column3"];

const tableRows = [[1,2,3],[a,b,c],[X,Y,Z]];

const doc = new jsPDF();

doc.autoTable(tableColumns, tableRows, { startY: 20 });

doc.text("Closed tickets within the last one month.", 14, 15);

doc.save('dataModel.pdf');

Peking

Answer 7

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

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

this worked for me

Wideangle

Answer 8

Deno is use ,in .ts File i have to Import these jsPdf and jspdf-autotable like these :

import { jsPDF, html } from "npm:[email protected]";
import  "npm:jspdf-autotable";

and then use like these :

pdf.autoTable({
  head: [itemDetailsHeaders],
  body: itemDetailsRows,
  startY: itemDetailsYStart, // Adjust the Y position as needed
  headStyles: {
      fillColor: headerStyles.fillColor,
      textColor: headerStyles.textColor,
      fontStyle: headerStyles.fontStyle,
      fontSize: 10, // Adjust the font size as needed
      font: 'Newsreader', // Set the font family
      halign: 'left',
  },
  columnStyles: {
    0: { cellWidth: columnWidths[0] }, // Adjust column widths as needed
    1: { cellWidth: columnWidths[1] },
    2: { cellWidth: columnWidths[2] },
      3: { cellWidth: columnWidths[3] },
      4: { cellWidth: columnWidths[4] },
  },
  alternateRowStyles: { fillColor: [255, 255, 255] },
  bodyStyles: {
    fontSize: 10, // Adjust the font size for the body
      font: 'Newsreader', // Set the font family for the body
      cellPadding: { top: 1, right: 5, bottom: 1, left: 2 }, // Adjust cell padding
      textColor: [0, 0, 0], // Set text color for the body
      rowPageBreak: 'avoid', // Avoid row page breaks
  },
  margin: { top: 10, left: 13 },
});

Result : end result

for rest of code please refer : https://medium.com/@aalam-info-solutions-llp/creating-dynamic-pdfs-with-jspdf-and-customizing-autotables-in-react-a846a6f3fdca

Buchheim

Answer 9

I was using laravel so i used this method. for this you can add this also

<!-- Include jsPDF AutoTable plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.16/jspdf.plugin.autotable.min.js"></script>

by adding this cdn you don't need to use import

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

Posey