Angular: Typescript: Uncaught TypeError: Cannot set property ‘autoTable’ of undefined

I am trying to import a simple table using angular with jspdf-autotable. But I cant, Here is error

jspdf.plugin.autotable.js:1023 Uncaught TypeError: Cannot set property 'autoTable' of undefined
    at Object.<anonymous> (jspdf.plugin.autotable.js:1023)
    at __webpack_require__ (jspdf.plugin.autotable.js:39)
    at jspdf.plugin.autotable.js:103
    at jspdf.plugin.autotable.js:106
    at webpackUniversalModuleDefinition (jspdf.plugin.autotable.js:12)
    at Object../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js (jspdf.plugin.autotable.js:19)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/components/zone-list/zone-list.component.ts (zone-list.component.ts:12)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/app-routing.module.ts (app-routing.module.ts:3)

For package.json :

"jspdf": "^2.1.0",
"jspdf-autotable": "^2.3.5",

For .ts :

here is import :

import jsPDF from 'jspdf';
var autoTable = require('jspdf-autotable');

here is download function :

var head = [['ID', 'Country', 'Rank', 'Capital']]
var data = [
  [1, 'Denmark', 7.526, 'Copenhagen'],
  [2, 'Switzerland', 7.509, 'Bern'],
  [3, 'Iceland', 7.501, 'Reykjavík'],
  [4, 'Norway', 7.498, 'Oslo'],
  [5, 'Finland', 7.413, 'Helsinki'],
]
const doc = new jsPDF()
autoTable(doc, {
  head: head,
  body: data,
  didDrawCell: (data) => {
    console.log(data.column.index)
  },
})

doc.save('table.pdf')

Tell me what went wrong?

Answer

Solution : Do not use jspdf, use pdfmake [https://www.npmjs.com/package/pdfmake]

(Why should you use a buggy tool when there is a far better tool out there with better features and has a easier way to code

Of course, I get it – no library is 100% perfect. But some library is more buggier than others when we talk about a special feature or purpose. Such as : My case was html table to PDF in typescript. I tried jspdf-autotable also but no luck)

My work is now more simple, I don’t need another screenshot tool like html2canvas to get all my tables screenshot, I no longer need to worry about my screenshot anymore, image resizing. Furthermore, I have an actual table that is in PDF, which means I can copy data from my PDF, its not only an image anymore.

So lets begin.

Install pdfmake:

(my case was install for Angular)

npm i pdfmake --save

typescript code:

Import it:

import pdfMake from "../../../../node_modules/pdfmake/build/pdfmake";
import pdfFonts from "../../../../node_modules/pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Write function:

Now just write a function for download PDF that you want to trigger by you PDF download button

  peopleExportToPdf() {
    let docDefinition = {
      content: [
        {
          table: {
            body: [
              [{ text: 'SL#', bold: true }, { text: 'Name', bold: true }, { text: 'Age', bold: true }],
              [{ text: 'Bold value', bold: true }, 'Val 2', 'Val 3'],
            ]
          }
        }]
    }

    docDefinition.content[0].table.body.pop(); //remove the unnecessary 2nd row
    let slno: number = 1;
    for (let p of this.people) {
      docDefinition.content[0].table.body.push([{ text: slno.toString(), bold: true }, p.name, p.age.toString()]);
      slno = slno +1;
    }
    pdfMake.createPdf(docDefinition).download('Report.pdf');
  }

3 heads up:

1. I have a table that has 3 columns slno, name, age. Design your table according to your need.
2. If you have a non-string item, convert it to string (I had to convert my age to string, if you don’t you might have an error – I had to face it)
3. You see I had to give an unnecessary row then removed it. you might have to do it also (I had to because I faced error, if you have found a better solution please post it)

Courtesy:

I got help from the two links below:

1. How to convert html table to pdf using pdfmake
2. this github link