How to setup html2pdf in Angular 11?

[JuanDa237]

I do the following commands: npm i jspdf html2pdf npm i @types/jspdf -D

And in the angular.json i add: ... "scripts": [ ... "node_modules/jspdf/dist/jspdf.min.js" ], ...

Then i tried to import html2pdf but i can't, i have this error: import html2pdf from 'html2pdf.js'; // Error: Could not find a declaration file for module 'html2pdf.js'. // npm i --save-dev @types/html2pdf.js

I tried the command but it dont work. What i have to do?

[Sun3]

I am also having the same issue with Typescript but I am using Vue 3.

Any solutions?

[lartheon]

anyone solved this?

[Chewieez]

We use this syntax to import html2pdf into an Angular 10/11 component:

import * as html2pdf from 'html2pdf.js';

You will probably want to add html2pdf.js to your angular.json under "allowedCommonJsDependencies" to suppress the CLI warnings.

"build": {
    options: {  
        "allowedCommonJsDependencies": [
            "html2pdf.js"
        ],
    }
}

[adelmassimo]

I do the following commands: npm i jspdf html2pdf npm i @types/jspdf -D

And in the angular.json i add: ... "scripts": [ ... "node_modules/jspdf/dist/jspdf.min.js" ], ...

Then i tried to import html2pdf but i can't, i have this error: import html2pdf from 'html2pdf.js'; // Error: Could not find a declaration file for module 'html2pdf.js'. // npm i --save-dev @types/html2pdf.js

I tried the command but it dont work. What i have to do?

Hi! I'm troubling for the same problem! Did you solved this issue?

[torongomlbd]

Add this in angular.json

"scripts": ["./node_modules/html2pdf.js/dist/html2pdf.bundle.min.js"]

and then add this as in the top of the component where you want to use html2pdf

declare let html2pdf: any;

[MnemosyneMei]

I do the following commands: npm i jspdf html2pdf npm i @types/jspdf -D And in the angular.json i add: ... "scripts": [ ... "node_modules/jspdf/dist/jspdf.min.js" ], ... Then i tried to import html2pdf but i can't, i have this error: import html2pdf from 'html2pdf.js'; // Error: Could not find a declaration file for module 'html2pdf.js'. // npm i --save-dev @types/html2pdf.js I tried the command but it dont work. What i have to do?

Hi! I'm troubling for the same problem! Did you solved this issue?

Hi, may I know if any of you solve it?

[Chewieez]

Try import * as html2pdf from 'html2pdf.js';

[MnemosyneMei]

Try import * as html2pdf from 'html2pdf.js';

Thanks. It seems the error still exist but by adding // @ts-ignore before import * as html2pdf from 'html2pdf.js' works fine for me.

[Chewieez]

You can try adding the line to the angular.json file that I mentioned in an earlier reply, on July 1.

[sitek94]

@MnemosyneMei, you can try declaring the module. I've got something like this, and it works fine, without using @ts-ignore

// types.d.ts
declare module 'html2pdf.js';

// then
import * as html2pdf from 'html2pdf.js';

[javarv87]

You can add the following code to tsconfig.json

"noImplicitAny": false,

[MrDony]

Add this in angular.json

"scripts": ["./node_modules/html2pdf.js/dist/html2pdf.bundle.min.js"]

and then add this as in the top of the component where you want to use html2pdf

declare let html2pdf: any;

Worked perfectly!

steps:

1. npm install html2pdf.js
2. add script in angular.json "./node_modules/html2pdf.js/dist/html2pdf.bundle.min.js"
3. add declare let html2pdf: any; to the top of the component you are going to use html2pdf in
4. to create a pdf and download it: const element = document.querySelector('#report-element');//id of HTML element const options = { filename: 'my-document.pdf', margin: 1, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, }; html2pdf().set(options).from(element).save();

[saudchougle]

for nextjs with typescript project. following worked for me

// @ts-ignore
import html2pdf from "html2pdf.js/dist/html2pdf.bundle.min.js"

html2pdf().from(elementRef.current).set(options).save()

for more detailed explaination check this post