html - 如何在 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>

当我点击下载按钮时，它会给我这个错误:

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

我已经在 demo.component.ts 中导入了 html2canvas。并尝试使用 formHTML 并且它有效，但我想专门使用 addHTML 函数或 html2canvas。

任何帮助将不胜感激。

Answer 1

只需尝试在您的 index.html 中包含以下 CDN URL，(顺便说一句，无需将其导入到您的组件中)

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

希望这对您有所帮助!