CODEWITHSUNDEEP
angulartypescriptjspdfjspdf-autotable
Ernesto Casanova
Ernesto Casanova

Reputation: 149

Angular 8, using jspdf and autotable-jspdf import/usage issues

Angular 8 - JSPDF & JSPDF-AutoTable

I need to export/generate one pdf base one grid in html, but is necessary some DOM changes with css, remove some toggle button and change header etc, and all solutions I found has some flicks in print like the simple window.print(). I tried also pdfmake-wrapper and ngx-export-as, but they don't have the autoTable magic...and the last one the dom changes are ignored, except if I use the Renderer2 DOM manipulation...but I need a solution with css class changes inject and no flick, so I get back the JSPDF.

I installed jspdf and jspdf-autotable packages with npm. 

"dependencies": {
    ...
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.2.4",
    ...
}

In angular-cli.json file, I have embedded the scripts:

"scripts": [ 
        "../node_modules/jspdf/dist/jspdf.min.js",
        "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
      ],

In my component.ts file , I have imported these files as follows:

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

I have also tried these lines to import jspdf-autotable

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

I have also tried another combination.

import jsPDF = require('jspdf');
import { autoTable as AutoTable } from 'jspdf-autotable';

But nothing is working.

// In My component.ts file I'm using sample code as follows:

let columns = ["ID", "Name", "Age", "City"];
var data = [
    [1, "Jonatan", 25, "Gothenburg"],
    [2, "Simon", 23, "Gothenburg"],
    [3, "Hanna", 21, "Stockholm"]
];
const doc = new jsPDF(); // or let doc = new jsPDF.default();
doc.autoTable(columns, data);
doc.save("filename");

But now when I run the node command to start app then during debug, I'm getting errors as:

a - Property 'autoTable' does not exist on type 'jsPDF'.

b - Error TS2339: Property 'default' does not exist on type 'typeof jsPDF'.

Any idea?

Upvotes: 3

Views: 20023

Answers (6)

aish.a
aish.a

Reputation: 186

The error you get is not because of the import. If you use doc.autoTable is the reason for the error. The below worked for me and it is given in the official documentation as well.

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

autoTable(doc, { html: '#report-per-depot',startY: 30, });

For different examples, https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js

Reference link: https://github.com/simonbengtsson/jsPDF-AutoTable#installation

Excerpt from the above link:

You can also use the exported autoTable method. This works better with typescript and alternative jsPDF versions.

 import jsPDF from 'jspdf'
 // import jsPDF = require('jspdf') // // typescript without esModuleInterop flag
 // import jsPDF from 'yworks-pdf' // using yworks fork
 // import jsPDF from 'jspdf/dist/jspdf.node.debug' // for nodejs
 import autoTable from 'jspdf-autotable'

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

Upvotes: 0

Don Dilanga
Don Dilanga

Reputation: 3022

You have to use as following. I had the same question for a while, but after asking the question from the developers, I found that you have to use the instance of jsPdf() as an argument of autoTable() function. Rest goes as the documentation of jsdpf.

import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

const doc = new jsPDF();

const columns = [['First Column', 'Second Column', 'Third Column']];
const data = [
['Data 1', 'Data 2', 'Data 3'],
['Data 1', 'Data 2', 'Data 3']
];

 autoTable(doc, {
      head: columns,
      body: data,
      didDrawPage: (dataArg) => { 
       doc.text('PAGE', dataArg.settings.margin.left, 10);
      }
 }); 

doc.save('table.pdf');

Example
Source Codes
https://codesandbox.io/s/currying-pine-wjp1g?file=/src/app/app.component.ts
Live Demo
https://wjp1g.csb.app/

Upvotes: 6

Shashan Sooriyahetti
Shashan Sooriyahetti

Reputation: 878

Correct answer respective to the question should be this. Posting if anyone needed this in future,

Refer https://github.com/simonbengtsson/jsPDF-AutoTable for autable

U need to,

npm install jspdf jspdf-autotable

and es6,

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

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

Upvotes: 0

Ernesto Casanova
Ernesto Casanova

Reputation: 149

I found the solution, but changing to another package, PDFMaker.

Check all documentation and supported browsers.

Checkout, there's a awesome playground and one example in Angular 8.

Upvotes: 2

Raghul Selvam
Raghul Selvam

Reputation: 315

Use this example 

var generateData = function (amount) {
    var result = [];
    var data =
    {
        coin: "100",
        game_group: "GameGroup",
        game_name: "XPTO2",
        game_version: "25",
        machine: "20485861",
        vlt: "0"
    };
    for (var i = 0; i < amount; i += 1) {
        data.id = (i + 1).toString();
        result.push(Object.assign({}, data));
    }
    return result;
};

function createHeaders(keys) {
    var result = [];
    for (var i = 0; i < keys.length; i += 1) {
        result.push({
        'id' : keys[i],
            'name': keys[i],
            'prompt': keys[i],
            'width': 65,
            'align': 'center',
            'padding': 0
        });
    }
    return result;
}

Output: enter image description here

Upvotes: 0

nephiw
nephiw

Reputation: 2046

I think what you would want to do is do something like:

const jsPDF = require('jspdf');

or 

import jsPDF from 'jspdf';

This assumes that your node_modules has been configured as part of your path, but if you are using the CLI you should be good here.

Upvotes: 0

Related Questions