angular - 在 angular 2 上从 div 创建和下载 pdf

Question

我正在尝试使用 jsPDF 从现有的 div 创建和下载 PDF。

我试了很多方法都做不到。

我最后一次尝试使用 @ViewChild 和 ElementRef 但没有成功。

detail-devis.component.ts:

import {Component, ElementRef, ViewChild} from "angular2/core";
declare let jsPDF; 

@Component({
selector: 'my-app',
template: `<div #test>
    Hello world
  </div>
  <button type="button" (click)="test()">pdf</button>
  <button (click)="download()">download</button>`
})

export class App {

  @ViewChild('test') el: ElementRef;

  constructor() {
  }

  public download() {
    var doc = new jsPDF();
    doc.text(20, 20, 'Hello world!');
    doc.save('Test.pdf');
  }

  public test() {
    let pdf = new jsPDF('l', 'pt', 'a4');
    let options = {
      pagesplit: true
    };
    pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
      pdf.save("test.pdf");
    });
  }
}

Plunker

有人知道使用 Angular 2 实现此目的的最简单方法吗？

Answer 1

我想问题是 ViewChild 给你一个 ElementRef 这是一个 Angular 类。您应该获取此对象的 nativeElement 以获取实际的 HtmlElement:

@ViewChild('test') el:ElementRef;


createPdf(): void {
   let pdf = new jsPDF('l', 'pt', 'a4');
   let options = {
      pagesplit: true
   };
   pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
      pdf.save("test.pdf");
   });
}

在您的 plunkr 中，您使用名称 test 作为方法名称。显然 Angular 不喜欢这样。你需要重命名它。之后你会遇到缺少库的问题:

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

将其中一个添加到您的项目中，它应该可以工作。请注意，函数 addHtml 是 deprecated

我做了一个工作 plunkr ，我在其中添加了 html2canvas。