基于Vue的v-charts导出图片并下载

依赖

npm install file-saver

 

页面

<ve-chart ref="chart"></ve-chart>

<el-button type="danger" @click="exportChart">导出图表</el-button>

 

JS

 

exportChart () {
      if (typeof Blob !== 'function') {
        this.$alert('您的浏览器不支持！请使用最新版本chrome/firefox浏览器!')
        return
      }
      const canvas = this.$refs.chart.$el.getElementsByTagName('canvas')[0]
      try {
        canvas.toBlob((blob) => {
          FileSaver.saveAs(
            blob,
            'chart.png'
          )
        })
      } catch (e) {
        console.error(e)
        this.$alert('导出失败！')
      }
    }

 

兼容的浏览器：

 

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9

 

如果浏览器不兼容可以使用 canvas-toBlob.js 作为pollyfill