在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中实现这个最简单的方法吗？

- Joffrey Hernandez

---

“无法实现”具体是什么意思？有任何错误信息吗？通常使用 () => { ... } 要优于 function() { ... }，因为在函数内部 this 将指向当前组件，否则将指向 pdf（或者函数被调用的位置）。 - Günter Zöchbauer

Answer 1

我想问题在于 ViewChild 给你的是一个 angular 类型的 ElementRef 对象。你需要获取该对象的 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不喜欢那个名字。您需要将其重命名。之后，您将遇到一个问题：缺少库：

您需要使用其中之一：https://github.com/niklasvh/html2canvas 或者 https://github.com/cburgmer/rasterizeHTML.js

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

我制作了一个运行良好的plunkr，并添加了html2canvas。

- Poul Kruijt

---

谢谢您的帮助。我遇到了这个错误："Error in ./DetailDevisComponent class DetailDevisComponent - inline template:14:24 caused by: self._el_33 is not a function" - Joffrey Hernandez

@JoffreyHernandez，你能否更新你的答案，展示你整个的DetailDevisComponent吗？ - Poul Kruijt

如果您想查看，我刚刚添加了一个 Plunker 链接。谢谢。 - Joffrey Hernandez

哇，谢谢。这个更好了，但是PDF的内容没有在div里面的文本。有什么想法吗？ - Joffrey Hernandez

@PierreDuc 我已成功将HTML表格保存为PDF，但是HTML页面中的颜色与PDF中的颜色不匹配。 - Jayani Sumudini