如何在 Angular 4 中使用 addHTML答案

【问题标题】：How to use addHTML in angular 4如何在 Angular 4 中使用 addHTML
【发布时间】：2019-01-02 06:26:25
【问题描述】：

我正在尝试在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。

任何帮助将不胜感激。

【问题讨论】：

标签： html angular jspdf html2canvas

【解决方案1】：

只需尝试在您的index.html 中包含以下 CDN URL，（无需顺便将其导入您的组件中）

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

希望这会有所帮助！

【讨论】：