标签：BizCharts 中将 creatIMg image sales 图表 year download

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

标签：BizCharts,中将,creatIMg,image,sales,图表,year,download
来源： https://blog.csdn.net/weixin_47583380/article/details/120249619

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。