1. 首先安装依赖

npm install html2canvas
或
yarn add html2canvas

2. 需要的地方导入

import html2canvas from 'html2canvas';

3. 使用

在触发下载保存的事件里

 downloadChart() {
      html2canvas(this.$refs[`chartEl${this.canvas_active}`]).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const a = document.createElement('a');
        a.href = imgData;
        a.download = 'chart.png';
        a.click();
      });
    },

参数是当前需要下载的echarts元素 可以是id 例如:document.getElementById('chart-container')

4. 结束语

 亲测好用,触发浏览器的下载功能,欢迎大家在下面评论

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐