Jspdf: How to use jsPDF in node? Gets _jspdf2.default is not a constructor error

Created on 24 Jun 2016  路  11Comments  路  Source: MrRio/jsPDF

I tried to import jspdf like this in my node app :

import jsPDF from 'jspdf';

Then tried to use the example code :

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

Then I get an error saying _jspdf2.default is not a constructor error. What is the right way to do this?

Bug nodeJS

Most helpful comment

@THPubs I think you'll need to do one of these:

const jsPDF = require('jspdf')

or

import * as jsPDF  from 'jspdf'

This is because es6 import syntax is subtly different than node's import syntax. Probably you're best off using node require, unless this lib is updated to better accommodate es6.

I'm not 100% sure how it all works. there's more discussion at, for example, https://github.com/Microsoft/TypeScript/issues/5565

All 11 comments

try in index.html => https://cdnjs.com/libraries/jspdf

@THPubs I think you'll need to do one of these:

const jsPDF = require('jspdf')

or

import * as jsPDF  from 'jspdf'

This is because es6 import syntax is subtly different than node's import syntax. Probably you're best off using node require, unless this lib is updated to better accommodate es6.

I'm not 100% sure how it all works. there's more discussion at, for example, https://github.com/Microsoft/TypeScript/issues/5565

I was facing the same problem, but was
using this syntax to import:

import { jsPDF } from 'jspdf'

I removed the brackets and now it is working.

I'm using SystemJS to load, so I mapped it in my config.js
map: { "jspdf": "node_modules/jspdf/dist/jspdf.min.js" }

installed typings:
typings install dt~jspdf --global --save

And in my component.ts
import jsPDF from 'jspdf';

let doc = new jsPDF(); doc.text(20, 20, 'Hello world.'); doc.save('Test.pdf');

How did you guys get around the window is undefined error?

it works for REACT!

import React from 'react';
import * as jsPDF  from 'jspdf'

class JSPDFTest extends React.Component {
    constructor(props){
        super(props);
        this.pdfToHTML=this.pdfToHTML.bind(this);
    }

    pdfToHTML(){
        var specialElementHandlers = {
            '#myId': function(element, renderer){
                return true;
            },
        };

        let doc = new jsPDF();
        doc.text(20, 20, 'Hello world.');
        doc.addPage('a4','p');
        var source = document.getElementById('myId'); //$('#HTMLtoPDF')[0];
        doc.fromHTML(
            source, 15, 15, {
                'elementHandlers': specialElementHandlers
            }
        );
        doc.addPage('a4','l');
        doc.fromHTML(
            source, 15, 15, {
                'elementHandlers': specialElementHandlers
            }
        );
        doc.save('Test.pdf');


    }

    render() {
        return (
            <div>
                <div id="myId" >
                        <h2>HTML to PDF</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                </div>
                <button onClick={this.pdfToHTML}>Download PDF</button>
            </div>
        );
    }
}

export default JSPDFTest;

I guess it works now.

I got it working with this syntax:

import jsPDF from 'jspdf';
const pdf = new jsPDF();

and since it is a good practice for any constructor to start with a capital letter and most likely linter would catch it as an error if you used a small letter, this syntax can be used:

import { default as JSPDF } from 'jspdf';
const pdf = new JSPDF();

I am getting the same error:

var doc = new jsPDF('l', 'mm', [500, headers.length * 150]);
TypeError: jsPDF is not a constructor

@RSPaul did you const { jsPDF } = require("jspdf") it?

@HackbrettXXX Yes, I used it but still getting the same error.

@RSPaul well then we need more information. Please share your complete code snippet, any build tools you use, node version, jsPDF version, etc.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MaxCodeDE picture MaxCodeDE  路  4Comments

mellisa0109 picture mellisa0109  路  3Comments

centurianii picture centurianii  路  4Comments

MelanieCroce picture MelanieCroce  路  4Comments

sayo96 picture sayo96  路  3Comments