輸出任意のチャート、任意のテーブルと私は私のプロジェクトで物事の下に実装しましたでAngular2プロジェクトに取り組んでいます

Question

Angular2プロジェクトの画像に任意のコンテンツ：

• jQxGrid（http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm）
• アンギュラ表
• nvd3箱ひげ図（https://nvd3-community.github.io/nvd3/）
• jQxDonutチャート（http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_donut_series.htm）

私はHTML/div/table/PNG/JPEGに任意のグラフをエクスポートできる共通のコードを実装したいと思います。

Angular 2でエクスポート機能を実装する最も簡単な方法はありますか？

私は以下のリンクを見て、実装しようとしましたが運はありませんでした。

https://github.com/tsayen/dom-to-image#usage

Render HTML to an image

https://www.aspsnippets.com/Articles/Convert-Export-HTML-DIV-or-Table-to-Image-using-HTML-Canvas-in-ASPNet-using-C-and-VBNet.aspx

https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/

Answer 1

あなたはそれはあなたがキャンバスとして任意のDOM部分を保存することができますhtml2canvas libraryを使用することができます。

このスクリプトを使用すると、Webページまたはその一部の「スクリーンショット」をユーザーのブラウザで直接取得できます。ここで

はあなたのコードになります方法の例です：

html2canvas($("#widget"), { 
    onrendered: function(canvas) { 
    $("#img-out").html(""); 
    theCanvas = canvas; 
    document.body.appendChild(canvas); 
    $("#img-out").append(canvas); 
    } 
}); 

これはa demo Fiddleです。

さらに多くの例がhtml2canvas websiteにあります。