web-dev-qa-db-ja.com

angular 2）のdivからPDFを作成してダウンロードします

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

プランカー

誰かがAngular 2？

angularjspdf
6
Joffrey Hernandez

問題は、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");
   });
}

プランカーでは、メソッド名にtestという名前を使用します。どうやらangularはそれが気に入らない。名前を変更する必要がある。その後、ライブラリがないという問題が発生する。

https://github.com/niklasvh/html2canvas または https://github.com/cburgmer/rasterizeHTML.js のいずれかが必要です

これらの1つをプロジェクトに追加すると、機能するはずです。ただし、関数addHtmlは 非推奨 であることに注意してください。

動作する plunkr を作成しました。ここで、html2canvasを追加しました。

11
PierreDuc