web-dev-qa-db-ja.com

ドキュメントをレンダリングするhtml2canvas PDF CSSのスタイル設定とangular2 / typescriptを使用

出力ファイルを生成する方法PDF angular2でhtml2canvasを使用

ファイルhtml2canvas TypeScriptをインポートしようとし、それを使用するために次のような宣言を行いました

declare let html2canvas: Html2CanvasStatic;

html2canvasが定義されていません

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

このファイルTypeScriptをgithubで見つけました html2canvas TypeScript

これを私のアプリケーションangular2にどのように使用できますか

pdfangulartypescripthtml2canvas
10
khalil _diouri

Html2canvasを次のように変更して使用できます。

package.json：

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

npm installを使用した後、次のように、component.tsファイルでhtml2canvasを使用できます。

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

@types/html2canvasをインストールしなければ、require経由でlibを使用できますが、インポート経由では使用できません。

html2canvas = require('hmtl2canvas');
14
mszalbach

Angular 4を使用している場合は、html2canvasを。angular-cli.jsonのスクリプトリストに含めることができます。

"scripts": [
    "../node_modules/html2canvas/dist/html2canvas.min.js"
]

その後、以下のようにクラスにインポートします

import * as html2canvas from "html2canvas"

次のように関数で使用します

html2canvas(parameters);
4
Anil Agrawal

2018年：

html2canvas(document.body).then((canvas) => {
    window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
  });
4
ismaestro

これは上記の回答に加えて、つまり@ types/html2canvasを依存関係に追加し、コードにインポート文を追加します。

ただし、上記のサンプルコードを使用すると、VisualStudioCodeでエラーが発生します。

「onrendered」はタイプ「Html2CanvasOptions」に存在しません。

それを解決するために、私は次のように "then"を使用しました：

html2canvas(document.body).then((canvas) => {
  document.body.appendChild(canvas);
});
1
pradeep
myClickFunction(event: any) {
html2canvas(event.target)
  .then((canvas) => {
    var img = canvas.toDataURL()
    window.open(img);
  })
  .catch(err => {
    console.log("error canvas", err);
  });
}
0
Vinayak Bappanadu