BizCharts中将图表保存成图片

BizCharts中将图表保存成图片

//引入的依赖
import { Chart, Interval, Tooltip } from 'bizcharts';
import html2canvas from 'html2canvas';
export const List1 = (props: any) => {
//渲染内容代码
 const data = [
    { year: '1951 年', sales: 0 },
    { year: '1952 年', sales: 52 },
    { year: '1956 年', sales: 61 },
    { year: '1957 年', sales: 45 },
    { year: '1958 年', sales: 48 },
    { year: '1959 年', sales: 38 },
    { year: '1960 年', sales: 38 },
    { year: '1962 年', sales: 38 },
  ];
//保存成图片方法
 const download = () => {
    // 图表转换成canvas
    html2canvas(document.getElementById('download') as any).then(function (
      canvas: any,
    ) {
      var img = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');
      // 创建a标签，实现下载
      var creatIMg = document.createElement('a');
      creatIMg.download = '图表.png'; // 设置下载的文件名，
      creatIMg.href = img; // 下载url
      document.body.appendChild(creatIMg);
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  };
return(
 <div style={{ width: '500px' }} id="download">
        <Chart height={300} autoFit data={data}>
          <Interval position="year*sales" />
          <Tooltip shared />
        </Chart>
      </div>
      <Button onClick={download}>download</Button>
      )
}