如何在angular 4中使用addHTML [英] How to use addHTML in angular 4

问题描述

我正在尝试在angular中使用jspdf库的addHTML函数，并且已经安装了html2Canvas但出现错误.

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

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

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

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

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:

错误:您需要 https://github.com/niklasvh/html2canvas 或 https://github.com/cburgmer/rasterizeHTML.js

我已经在demo.component.ts中导入了html2canvas. 并尝试使用formHTML并能正常工作，但我想专门使用addHTML函数或html2canvas.

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.

推荐答案

只需尝试在您的index.html中包含以下CDN URL(无需将其导入组件中)

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

希望这会有所帮助！

这篇关于如何在angular 4中使用addHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！