CODEWITHSUNDEEP
javascriptjspdfjspdf-autotable
V_swan
V_swan

Reputation: 21

Can't use jsPDF-AutoTable is not a function since v3.5.13 (jsPDF v2.1.1)

When I was using older versions of the libraries, I could create pdf just fine. But since these new versions I can't. Earlier I just downloaded jspdf.min.js file, but now I can see various of versions, like umd, es.. But I don't know, what to use (?), so I downloaded umd version. I don't use angular or node.js, so I can't use require or import (with import I have an error: Uncaught SyntaxError: export declarations may only appear at top level of a module) instructions in my javascript code before creating pdf document. So I'm using const { jsPDF } = window.jspdf; to to use jsPDF class (without it I get error "Uncaught ReferenceError: jsPDF is not defined", after line const doc = new jsPDF();). But I want to use the plugin AutoTable also and in official page of the plugin https://github.com/simonbengtsson/jsPDF-AutoTable the author uses import or require, for me it doesn't work. When I try

const { jsPDF } = window.jspdf;
const doc= new jsPDF();
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', '[email protected]', 'Sweden'],
    ['Castille', '[email protected]', 'Spain'],
  ],
})

I get the error Uncaught TypeError: pdf.autoTable is not a function. How could I use the libraries right? I guess jsPDF works for me with version umd and const { jsPDF } = window.jspdf; (I created just a simple document with a string and it worked), but AutoTable doesn't work

Upvotes: 0

Views: 3636

Answers (3)

jean-acsas
jean-acsas

Reputation: 53

I successfully tried it for the newer versions of jspdf (version 2.5.1) and autotable (version 3.5.25).

Minimal example:

<!DOCTYPE html>
<html>
    <head>
        <title>jspdf-autotable demo</title>
    </head>
    <body>
        <div>save pdf modal will pop up automatically</div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js"></script>
    <script>
      const { jsPDF } = window.jspdf;
      const doc= new jsPDF();
      doc.autoTable({
        head: [['Name', 'Email', 'Country']],
        body: [
          ['David', '[email protected]', 'Sweden'],
          ['Castille', '[email protected]', 'Spain'],
        ],
      })
      doc.save("demo.pdf");
    </script>
</html>

Upvotes: 3

V_swan
V_swan

Reputation: 21

The only solution, that works for me now, is to save the code of jsPDF and AutoTable in the same file. It's not good idea, I know, I would like to have them in separate files, but I haven't founded another way. It anybody could tell a better way to avoid the errors, it would be great

Upvotes: 1

Cheloespinoza
Cheloespinoza

Reputation: 65

Export autoTable method, import autoTable from 'jspdf-autotable'

function createPdf() {
var doc = new jsPDF();
const head = [['ID', 'Country', 'Index', 'Capital']]
const data = [
[1, 'Finland', 7.632, 'Helsinki'],
[2, 'Norway', 7.594, 'Oslo'],
[3, 'Denmark', 7.555, 'Copenhagen'],
[4, 'Iceland', 7.495, 'Reykjavík'],
[5, 'Switzerland', 7.487, 'Bern'],
[9, 'Sweden', 7.314, 'Stockholm'],
[73, 'Belarus', 5.483, 'Minsk'],
]
autoTable(doc, {
head: head,
body: data,
didDrawCell: (data) => {
console.log(data.column.index)
},
})
doc.save('repro.pdf');
}

Upvotes: -1

Related Questions