web-dev-qa-db-ja.com

angle2 / typescriptを使用してhtmlからPDFファイルを生成

HTMLテンプレートの一部を取得して、PDFファイルに変換して、ユーザーにダウンロードのオプションを提供します。たとえば、ボタンをクリックした後）。

JsPDFと呼ばれるライブラリを見つけましたが、Angular2アプリ（RC4）でjsPDFを使用するにはどうすればよいですか？

ありがとうございました

pdfangulartypescriptjspdf
12
khalil _diouri

実稼働環境で使用する場合、@ khalil_diouriが提案するように、index.htmlで参照されているインターネットリンクに依存することは絶対に避けた方がよいでしょう。

したがって、Angular2/TypeScript環境で適切に使用するには、まずnpmからインストールします

npm install --save jspdf

SystemJSを使用している場合は、構成ファイルにマッピングします

map: {
    "jspdf": "node_modules/jspdf/dist/jspdf.min.js"
}

定義パッケージのインストール：（インストールされていない場合）

npm install typings --global

定義ファイルをインストールします。

typings install dt~jspdf --global --save

そして最後に、それをcomponent.tsファイルにインポートします

import jsPDF from 'jspdf'
...
    let doc = new jsPDF();
    doc.text(20,20,'Hello world');
    doc.save('Test.pdf');
...
18
crtormen

応答として

このリンクは、jsPDFコンテンツをインポートするために必要です

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file

それからあなたのcomponent.ts

あなたはそれをする

declare let jsPDF;

@Component({
    template: `
        <button
          (click)="download()">download
        </button>
        `
})

export class DocSection {


    constructor() {
    }

    public download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }

}
12
khalil _diouri

addHtmlメソッドは非推奨です：

ソース：plugins/addhtml.js、行12非推奨：これは、ベクターをサポートするAPIに置き換えられています。 こちらを参照

PDFに追加されたキャンバスオブジェクトにHTML要素をレンダリングします

この機能には html2canvas または rasterizeHTML が必要です

2
Mohammed Yassine CHABLI

定義（宣言とも呼ばれる）ファイルを使用する理由

（TypeScriptを使用する）Angular2アプリケーションで外部javascriptライブラリ（jsPDFなど）を使用するには、それらのjavascriptライブラリのタイプ定義ファイルが必要になります。これらのファイルは、タイプ情報（String、Number、booleanなど）をTypeScriptに提供して、コンパイル時の型チェックを支援します。 （javascriptは緩やかに入力されるため）

D.tsファイルに関する別の説明を見つけることができます here 。

使い方

typingsというnpmパッケージをダウンロードできます。これにより、プロセスを迅速に行うことができます。 こちら 使い方の簡単なガイド。入力をインストールしたら、次を実行できます。

npm run -- typings install dt~jspdf --global --save

プロジェクトで使用できるタイピングファイルを取得します。

1
Scrambo