首页 > 其他 > 详细

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

时间:2019-11-18 16:14:06      阅读:553      评论:0      收藏:0      [点我收藏+]

依赖

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

 

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

原文:https://www.cnblogs.com/xcr1234/p/11882711.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!