PrimeNgチャートの画像を保存またはダウンロードするには - 角度4

Question

私はPrimeNgチャートモジュール内のチャートを表示するためのモジュール（p-chart）を使用しています。要件は、ダウンロードアイコンをクリックして（グラフ/グラフの）画像を保存できることです。私はngForを使用してJSONオブジェクトを反復処理し、チャートを内部カードに正常に表示しました。ここで

はHTMLです：

... 
<div class="card-media-block" id="Chart-{{rCard.id}}"> 
    <p-chart [type]="rCard.typeofReport" [data]="rCard.content"></p-chart> 
</div> 
... 

私もP-チャートは、ランタイムでキャンバスに変換されるため、専用のIDを持っていないことがわかりました。だから私は、.childNodesプロパティが、これからイメージをダウンロード/保存し、残念ながらできませんを使用して、そのcanvas要素に到達するためのDIV要素のID最も近い使用しました。

<div _ngcontent-c3="" class="card-media-description" id="Chart-ReportCard1"> 
    <p-chart _ngcontent-c3="" class="ng-tns-c3-2" ng-reflect-type="bar" ng-reflect-data="[object Object]"> 
     <div> 
      <iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe> 
      <canvas width="300" height="150" style="display: block;"></canvas> 
     </div> 
    </p-chart> 
</div> 

ここで私は、画像を保存するための書き込みしようとしたtypescriptです関数である：

saveImage(pCard): void { 
    let chartDiv = document.getElementById('Chart-' + pCard['id']); 
    let canvasElement = chartDiv.childNodes[1].childNodes[1].childNodes[2]; 

    console.log(canvasElement); // Output:- <canvas width="300" height="150" style="display: block;"></canvas> 
    let imageURL = canvasElement.toDataURL(); // Error:- Property 'toDataURL' does not exist on type 'Node'. 
    window.location.href = imageURL; 
} 

I」はここ

は（要素を検査することによって見出される）上のブロックから生成されたランタイム・HTMLでありますこの問題に固執して、親切に助けてください。要素を反復処理するQueryListとElementRefと@ViewChildrenデコレータを使っへ

Answer 1

ルック

例：

@ViewChildren("barChart") charts: QueryList<ElementRef>; 

saveImage(event) { 
    this.charts.forEach(element => { 
     console.log(element); 
    }); 
}