vue 将echart 下载为base64图片

1 echart是页面的子组件,

2 页面有多个echart

3 将多个echart下载为base64图片

复制代码
// 子组件 echart,要保存echart
 const chart = this.$echarts.init(this.$refs.chart, 'light')
this.chartData = chart;   //保存数据,供父组件alarmReport调用(this.$refs.chartItem) 

// 父组件
      let childComponent = this.$refs.chartItem	// 获取子组件
        let chArr = []
          for (var i = 0; i < childComponent.length; i++) {
            if (childComponent[i].datakeys.length > 0) {   // 判断echarts 数据是否为空
              chArr.push({ data: childComponent[i].chartData })
            }
          }
          let eimgs = chArr.map(item => {
            item.chartData = item.data.getDataURL({   //echarts下载图片,getDataURL获取base64地址
              pixelRatio: 2,
              backgroundColor: '#fff'
            })
            return { src: item.chartData }
          })
          this.chartImg = eimgs

 this.chartImg.map(item => `<img src="${item.src}" width="550"/>`)
 // base64 url 可直接使用; 也可供html使用,下载文件等

推荐扩展阅读

前端实现将echarts放入word文件中导出下载

链接: http://t.csdnimg.cn/L5cNg

相关推荐
excel1 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼3 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping3 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙4 小时前
[译] Composition in CSS
前端·css
白水清风4 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix4 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278004 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端4 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧4 小时前
Promise 的使用
前端·javascript
NBtab4 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端