創建並下載PDF格從角2 2

我試圖創建和從jsPDF從現有的div下載PDF。創建並下載PDF格從角2 2

我嘗試了很多方法，但是我無法實現。

我最後一次嘗試與@ViewChild和ElementRef但不工作。

細節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

有人知道與角2實現這一目標的最簡單的方法？

來源

2017-01-30 Joffrey Hernandez

「無法達到」是什麼意思？任何錯誤消息？通常使用'（）=> {...}'優於'function（）{...}'，因爲函數內this將指向當前組件，否則指向'pdf'（或者無論哪個函數被調用） –

我想這個問題是ViewChild給你一個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一個方法名稱。顯然角度不喜歡那樣。你需要重新命名。之後，你會遇到你缺少庫問題：

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

加入其中一個到您的項目，它應該工作。請注意，功能addHtml是deprecated

我做了一個工作plunkr，其中我加了html2canvas。

來源

2017-01-30 15:37:22 PierreDuc

謝謝你的幫助。我得到這個錯誤：「./DetailDevisComponent類中的錯誤DetailDevisComponent - 內聯模板：14：24引起：self._el_33不是一個函數」 –

@JoffreyHernandez你可以更新你的答案來顯示你的整個'DetailDevisComponent'？ – PierreDuc

我剛更新我的問題。 –

創建並下載PDF格從角2 2

回答

相關問題