Angular 9 with jsPDF module : Type 'typeof jsPDF' has no construct signatures
13,036
I setup a fresh angular 10 project and was able to use jspdf
.
- Create new Angular app
> npx @angular/cli new pdf-viewer --strict --defaults true
- Install
jspdf
package from npm registry
> cd pdf-viewer
> npm install jspdf --save
> npm install @types/jspdf --save-dev
- Update
tsconfig.base.json
. AddallowSyntheticDefaultImports
insidecompilerOptions
"allowSyntheticDefaultImports": true
- Add some
jspdf
code to test insrc/app/app.component.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';
import jsPDF from 'jspdf';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
title = 'pdf-viewer';
constructor() {
this.generatePDF();
}
private generatePDF(): void {
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('a4.pdf');
}
}
- Launch angular application and navigate to
http://localhost:4200
. You will notice thata4.pdf
gets downloaded as soon as we open the webpage. Open the PDF file to verify the integrity of the file.
> npm start
Author by
Vladyslav Didenko
Updated on June 09, 2022Comments
-
Vladyslav Didenko almost 2 years
Angular 9 Module which has issue jsPDF (installed types + packages itself)
When doing ng serve it works When doing ng build --prod , it has errors
ERROR in src/app/xxx/xxxx.componentomponent.ts:52:27 - error TS2351: This expression is not constructable. Type 'typeof jsPDF' has no construct signatures. 52 let pdf = new jsPDF('p', 'mm', 'a4'); ~~~~~ src/app/xxx/xxxx.component.ts:7:1 7 import * as jsPDF from 'jspdf'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
tsconfig file has "esModuleInterop": true,
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "esModuleInterop": true, "importHelpers": true, "target": "es2015", "allowSyntheticDefaultImports":true, "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }
I import the module like this :
**import * as jsPDF from 'jspdf';**
Use it like this inside my class :
generatePDF() { var data = document.getElementById('contentToConvert'); html2canvas(data).then(canvas => { var imgWidth = 208; var imgHeight = canvas.height * imgWidth / canvas.width; const contentDataURL = canvas.toDataURL('image/png') let pdf = **new jsPDF**('p', 'mm', 'a4'); var position = 0; pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight) pdf.save('skill-set.pdf'); }); }
I also tried to add the module js files in scripts section of angular.json
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", **"node_modules/jspdf/dist/jspdf.min.js"** ]
-
Vladyslav Didenko almost 4 yearsI figured out was was wrong. In my code , I pass some parameters "new jsPDF**('p', 'mm', 'a4') " as I found in some of the examples . This was actually the issue. Once I changed to **new jsPDF**() declaration , error was gone