如何保存或下載PrimeNg圖表圖像 - Angular 4

我正在使用PrimeNg圖表模塊（p圖表）顯示卡內的圖表。要求是，我們應該能夠通過點擊下載圖標來保存圖像（圖表/圖表）。我已經使用ngFor來遍歷JSON對象，併成功顯示卡內圖表。如何保存或下載PrimeNg圖表圖像 - Angular 4

下面是HTML：

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

我還發現，對圖表轉換爲畫布在運行時並且因此不具有任何專用ID。所以，我用最近DIV元素的ID達到使用.childNodes屬性，canvas元素，但遺憾的是沒能保存/從這裏下載圖像。

這裏是從上面的塊所生成的運行時的html（通過檢查元件實測值）：

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

這裏是打字稿功能我試圖寫用於保存圖像：

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」米堅持這個問題，請幫助。

來源

2017-08-31 Indranil Paul

做任何人有任何解決方案？ –

考慮使用該@ViewChildren裝飾用QueryList和ElementRef通過元素迭代

例子：您的模板中：

<div *ngFor="let cdl of chartDataList"> 
    <p-chart #barChart type="bar" [data]="cdl"></p-chart> 
</div>

您的組件中：

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

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

來源

2017-08-31 19:33:51 BillF

嗨@BillF，我試過了上面的解決方案。在console.log中，我可以看到=> UIChart {el：ElementRef，onDataSelect：EventEmitter，類型：「bar」，_data：{...}，chart：Chart，...}。現在應該如何將圖像保存爲本地驅動器中的.png/.jpeg文件？ –

那麼，因爲它是基於chart.js，所以我想你會調用'.toBase64Image（）'函數來生成一個base64編碼的圖像字符串 – BillF

'.toBase64Image（）'不是ElementRef的可識別屬性，所以它顯示編譯錯誤。 –

如何保存或下載PrimeNg圖表圖像 - Angular 4

回答

相關問題