Reactjs 使用react-chartjs-2，如何使用下载按钮将图表保存为png

我正在尝试使用按钮Onclick下载我的chart.js图表作为png，但我不知道如何实现这一点，我已经完成了这个答案，但对我来说还不够清楚，因为我是chart.js的新手。我不知道如何将这些变量与我的按钮连接起来

import React from 'react';
import { Component, useRef } from 'react';
import { Bar } from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';

const data = {
  labels: ['Finance & Business', 'Mining', 'Community Services', 'Electricity', 'Agriculture', 'Construction', 'Manufacture', "Trade & Tourism", "Transport & Logistics"],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: ["#3283FC", "", "", "#00C0C8", "#C0BD00", "#3A46B1", "#00A150", "#FEB200", "#9302a1"],
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [0.6, 0.0, 0.0, -0.1, -0.1, -0.3, -0.3, -0.6, -1.0],
    }
  ]
};


class StackedBar extends Component {

  render() {

    return (
      <div>
        <h2>Bar Example (custom size)</h2>
        <Bar

          data={data}
          options={{
            plugins: {
              datalabels: {
                display: true,
                color: '#fff'
              }
            },
            title: {
              display: true,
              text: 'Contribution Percentage',
              position: 'left'
            },
            maintainAspectRatio: true,
            scales: {
              xAxes: [{

                stacked: true,
                gridLines: {
                  borderDash: [2, 6],
                  color: "black"
                },
                scales: {
                }
              }],
              yAxes: [{
                ticks: {
                  beginAtZero: true,
                  steps: 0.5,
                  stepSize: 0.5,
                  max: 1.5,
                  min: -1.0

                },
              }]

            },

          }}
        />
      </div>
    );
  }
}
export default StackedBar;

从“React”导入React；
从“react”导入{Component，useRef}；
从'react-chartjs-2'导入{Bar}；
导入“chartjs插件数据标签”；
常数数据={
标签：[“金融与商业”、“采矿”、“社区服务”、“电力”、“农业”、“建筑”、“制造”、“贸易与旅游”、“运输与物流”]，
数据集：[
{
标签：“我的第一个数据集”，
背景色：[“#3283FC”、“，”、“#00C0C8”、“#C0BD00”、“#3A46B1”、“#00A150”、“#FEB200”、“#9302a1”]，
边框宽度：1，
hoverBackgroundColor:'rgba（255,99132,0.4）'，
hoverBorderColor:'rgba（255,99132,1）'，
数据：[0.6,0.0,0.0，-0.1，-0.1，-0.3，-0.3，-0.6，-1.0]，
}
]
};
类StackedBar扩展组件{
render（）{
返回(
条形图示例（自定义尺寸）
);
}
}
导出默认StackedBar；
所以我安装了一个名为FileSave.js的插件//

npm安装
npm i文件保护程序
导入插件
从“文件保护程序”导入{saveAs}

而不仅仅是编写这个blob函数
类StackedBar扩展组件{
saveCanvas（）{
//保存到png
const canvasSave=document.getElementById（'stackD'）；
canvasSave.toBlob（函数（blob）{
saveAs（blob，“testing.png”）
})
}
render（）{
返回(
下载为PNG
);
}
}
导出默认StackedBar；
另一个选项是使用chart ref，然后使用chart.js toBase64Image函数。将其另存为base64，转换为blob并使用文件保护程序包另存为文件

import { saveAs } from 'file-saver';

/**
 * @param b64Data
 * @param contentType
 * @param sliceSize
 * @returns {Blob}
 * @link https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
 */
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < slice.length; i += 1) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
};

... in component
  const chartRef = useRef(null);
... in jsx...


<Button
   onClick={() => {
   const b64 = chartRef.current.toBase64Image().replace('data:image/png;base64,', '');
   const content = b64toBlob(b64);
   const file = new File([content], 'Revenue_chart.png', { type: 'image/png' });
   saveAs(file);
  }}
  >
    img
</Button>
<Line data={data} options={options} ref={chartRef} />

从“文件保护程序”导入{saveAs}；
/**
*@param b64Data
*@param contentType
*@param切片大小
*@returns{Blob}
*@linkhttps://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
*/
const b64toBlob=（b64Data，contentType=''，sliceSize=512）=>{
常量ByTechCharacters=atob（B64数据）；
常量字节数组=[]；
for（让offset=0；offset
img

import { saveAs } from 'file-saver';

/**
 * @param b64Data
 * @param contentType
 * @param sliceSize
 * @returns {Blob}
 * @link https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
 */
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < slice.length; i += 1) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
};

... in component
  const chartRef = useRef(null);
... in jsx...


<Button
   onClick={() => {
   const b64 = chartRef.current.toBase64Image().replace('data:image/png;base64,', '');
   const content = b64toBlob(b64);
   const file = new File([content], 'Revenue_chart.png', { type: 'image/png' });
   saveAs(file);
  }}
  >
    img
</Button>
<Line data={data} options={options} ref={chartRef} />