How to import jspdf-autotable in Vue main.js?

Question

I searched all over the internet but found nothing. I know this is a noob question.

I installed jspdf and jspdf-autotable over npm in my vue project:

npm install jspdf --save
npm install jspdf-autotables --save

Packages installed successfully. I'm importing jspdf and jspdf-autotable in main.js file like that:

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

Vue.use(jsPDF)

Then in my .vue file I import jsPDF first:

import jsPDF from 'jspdf';

and then in mounted() hook:

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

But autoTable is not imported. It says unresolved method or hook autotable. I get empty pdf.

I don't know how to import autoTable. Please help me. It's one day left to finish my job. Sorry I'm new to Vue js. Many thanks in advance!

Answer 1

Good question, but not necessary you use this in your main file, you can use this in your specific file (for performance reasons). The autotable is one complement to work with table in your JsPdf. This necessary only load the file in your component. e.g.:

import JsPDFAutotable from 'jspdf-autotable' 

and your component

components: { JsPDFAutotable }