如何在Angular 4中使用addHTML

Question

我正在尝试在Angular中使用jspdf库的addHTML函数，并已安装html2Canvas，但是出现了错误。

这是我的demo.component.ts文件。

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');
    });
   }
  }

这是我的 demo.component.html 文件。

<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>

当我点击下载按钮时，会出现以下错误：

错误：您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js 我已经在demo.component.ts中导入了html2canvas，并尝试使用formHTML，它可以工作，但我想特别使用addHTML函数或html2canvas。

任何帮助将不胜感激。

- Vijay Sharma

Answer 1

只需在您的index.html中包含以下CDN URL即可（顺便说一下，无需将其导入到您的组件中）

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

希望这可以帮助你！

- David R