Login/Register
doc.fromHTML is not a function with angular 6
Asked Answered
Solved angularangular6jspdfexport-to-pdf
S

1

7

I wanna export a template html to pdf and I'm trying use jsPDF lib with angular, but o got this error doc.fromHTML is not a function.

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
// declare var jsPDF: any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'exports-pdf';
@ViewChild('exports') exports: ElementRef;

public print(): void {

const doc = new jsPDF('p', 'pt', 'letter');

const content = this.exports.nativeElement;

const margins = {
  top: 80,
  bottom: 60,
  left: 40,
  width: 522
};
console.log(doc);
setTimeout(() => {
  doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function() {
    doc.output('export.pdf');
  }, margins);
  }, 100);
 }
}

I tried too to use import * as jsPDF from 'jspdf'; or declare var jsPDF: any;

when I use declare var jsPDF: any, I have at the console all jsPDF properties, but nothing happen when I click on button. When I use import * as jsPDF from 'jspdf' i have an object without any properties like this image: object without any properties

In angular.json i put in scripts the imports

"scripts": [ "./node_modules/jspdf/dist/jspdf.min.js", "./node_modules/jspdf/dist/jspdf.debug.js" ]

and the error goes on.

I found other dudes with the same error but without solution. I don't know if it is a lib bug or if with angular it not work very well.

I uploaded the code to GitHub.

Solano answered 29/12, 2018 at 18:12 Comment(0)
E
4

Remove what I commented from your code. To export as pdf you need to use save function doc.save("export.pdf");

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
// import { log } from 'util'; ** REMOVE **
// import * as jsPDF from 'jspdf'; ** REMOVE **
declare var jsPDF: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'exports-pdf';
  @ViewChild('exports') exports: ElementRef;

  public print(): void {

    const doc = new jsPDF('p', 'pt', 'letter');

    const content = this.exports.nativeElement;

    const margins = {
      top: 80,
      bottom: 60,
      left: 40,
      width: 522
    };
    console.log(doc);
 //   setTimeout(() => { ** REMOVE **
      doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function () {
      //  doc.output('export.pdf'); ** REMOVE **
        doc.save("export.pdf");
      }, margins);
 //   }, 100); ** REMOVE **
  }
}

angular.json

"scripts": [
   "./node_modules/jspdf/dist/jspdf.min.js",
 //  "./node_modules/jspdf/dist/jspdf.debug.js" ** REMOVE **
 ]

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ExportsPdf</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- ** REMOVE ** <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> -->
</head>
<body>
  <app-root></app-root>
</body>
</html>
Escheat answered 29/12, 2018 at 20:4 Comment(12)
Thanks so much, man. I tried use the save() but i was importing this import * as jsPDF from 'jspdf'; I was already hopeless. Thank you again! – Solano
says jsPDF is not defined in console. can you please help me out? I'm having similar issues using Angular 10 – Jenkins
Have you this line declare var jsPDF: any;? – Escheat
I'm getting the same error.' jsPDF is not defined', any solution ? – Orthicon
unable to get pdf – Loverly
import { jsPDF } from "jspdf"; if it says jsPDF is not defined – Spitball
@Escheat Getting doc.fromHTML is not a function error when I use import { jsPDF } from 'jspdf'; OR declare var jsPDF: any; in Angular 10 – Hyaloplasm
@Hyaloplasm have you imported this script ./node_modules/jspdf/dist/jspdf.min.js ? – Escheat
@Escheat getting jsPDF is not defined error in browser after doing all 4 steps, 1. declare var jsPDF: any; in .ts, 2. angular.json - "architect" : {... "build": {..."options": {"scripts": ["./node_modules/jspdf/dist/jspdf.min.js"]}}, 3. "dependencies": { "@angular/core": "~10.1.3", "jspdf": "^2.3.0", } – Hyaloplasm
@Hyaloplasm , Please make an example on stackblitz.com – Escheat
@Escheat stackblitz.com/edit/angular-ivy-6gwogv , open console & click on button. – Hyaloplasm
@Hyaloplasm Also the problem is that js fie not imported, alternative you can remove it from angular.json and package.json and put this script in you index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> – Escheat

© 2022 - 2024 — McMap. All rights reserved.