How to use addHTML in angular 4

问题

I'm trying to use addHTML function of jspdf library in angular and have already installed html2Canvas but got an error.

This is my demo.component.ts file.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from "html2canvas";

@Component({
 selector: 'app-demo',
 templateUrl: './demo.component.html',
 styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
@ViewChild('content') content:ElementRef;

constructor() { }

ngOnInit() {}

download() {
console.log("vijay")
let doc = new jsPDF('p','pt','a4');

let specialElementHandlers = {
  '#editor': function (element, renderer) {
      return true;
  }
};


let content  = this.content.nativeElement.innerHTML;

// doc.fromHTML( content, 15, 15, {
//   'width': 200,
//   'elementHandlers': specialElementHandlers
// });

    doc.addHTML(document.getElementById('content'),function() {
         doc.save('web.pdf');
    });
   }
  }

This is my demo.component.html file.

<div #content>
<h2>HTML Table</h2>

    <table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    </table>
</div>
<button (click)="download()" > Download </button>

When I hit on download button it will give me this error:

Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

I have already imported html2canvas in demo.component.ts. and have tried with formHTML and it works but I want to specifically use addHTML function or html2canvas.

Any help would be highly appreciated.

回答1:

Just try including the below CDN URL in your index.html, (no need to have it imported in your component by the way)

https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js

Hope this helps!

来源：https://stackoverflow.com/questions/51518819/how-to-use-addhtml-in-angular-4

标签

html

angular

jspdf

html2canvas