CODEWITHSUNDEEP
javascriptangularjspdf-generationjspdfjspdf-autotable
Stu Furlong
Stu Furlong

Reputation: 3629

jsPDF AutoTable - autoTable is not a function

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!

Upvotes: 10

Views: 36938

Answers (9)

123siv
123siv

Reputation: 1

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

Upvotes: 0

Avadhut Jagde
Avadhut Jagde

Reputation: 1

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

Upvotes: 0

Hrushikesh Malshikare
Hrushikesh Malshikare

Reputation: 36

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

Upvotes: 0

Vikas Chauhan
Vikas Chauhan

Reputation: 1

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

Upvotes: 0

Trịnh Đức
Trịnh Đức

Reputation: 31

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!

Upvotes: 3

Sachini Witharana
Sachini Witharana

Reputation: 116

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

Upvotes: 0

Anup Bangale
Anup Bangale

Reputation: 631

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

Upvotes: 1

Ewomazino Ukah
Ewomazino Ukah

Reputation: 2366

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"
]

Upvotes: 0

Jorge Casariego
Jorge Casariego

Reputation: 22212

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

Upvotes: 16

Related Questions