如何保存或下载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

回答

相关问题