如何保存或下载 PrimeNg 图表图像 - Angular 4

Question

我正在使用 PrimeNg chart 模块（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-chart 在运行时被转换为 canvas，因此没有任何专用的ID。所以我使用最近的 DIV 元素的 ID 来使用 .childNodes 属性到达该画布元素，但不幸的是无法从中保存/下载图像。

这是从上述块生成的运行时 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;
}

我被这个问题困住了，请帮忙。

Answer 1

考虑使用带有 QueryList 和 ElementRef 的 @ViewChildren 装饰器来遍历元素

示例： 在您的模板中：

<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);
    });
}