echarts自定义下载图表

// 全局注册bus
const bus = new Vue()
Vue.prototype.$bus = bus

// 导出图片  可以自定义一些样式
export function exportImg(myChart, name) {
  var img = new Image()
  img.src = myChart.getDataURL({
    type: 'png',
    pixelRatio: 1, // 放大1倍
    backgroundColor: '#fff'
  })
  img.onload = () => {
    var canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    var ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    var dataURL = canvas.toDataURL('image/png')
    var a = document.createElement('a')
    // 创建一个单击事件
    var event = new MouseEvent('click')
    // 将a的download属性设置为我们想要下载的图片名称
    a.download = name
    // 将生成的URL设置为a.href属性
    a.href = dataURL
    // 触发a的单击事件
    a.dispatchEvent(event)
  }
}
// 公用导出图片或者excel的方法（默认图片背景颜色是黑色，暂时还没有研究怎么给背景颜色）
export function downFileBlob(fileData, fileType, fileName) {
  let blobData = fileData
  let contentType = ''
  if (fileType === 'image') {
    //图片
    let parts = fileData.split(';base64,');
    contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    blobData = uInt8Array
  } else if (fileType === 'excel') {
    contentType = 'application/vnd.ms-excel'
  }

  const link = document.createElement('a')
  let blob = new Blob([blobData], {
    type: contentType
  })
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)

  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 图表公用组件(主要是拿到this.chart = 实例化echarts)
mounted() {
   // this.$nextTick(() => {
   //   this.initChart()
   // })
   this.$bus.$on('exportImage', this.exportImage)
 },
 beforeDestroy() {
   // if (!this.chart) {
   //   return
   // }
   // this.chart.dispose()
   this.$bus.$off('exportImage', this.exportImage)
   // this.chart = null
 },
 methods: {
   exportImage(res) {
     const fileName = res.fileName || 'img'
     if (this.chart) {
     // downFileBlobl来自公用导出图片或者excel的方法
       downFileBlob(this.chart.getDataURL(), 'image', fileName)
     }
   },
 }

// 调用
this.$bus.$emit('exportImage', 'image', { fileName: '导出之后文件的名称' })