echarts导出图片(.png和.jpg)

const exportCharts = (fileName) => {
  if (document.getElementById('chartsShow')) {
    let chartsCanvas = document.getElementById('chartsShow').querySelectorAll('canvas')[0]
    let mime = 'image/png'
    if (chartsCanvas) {
   	  // toDataURL()是canvas对象的一种方法,用于将canvas对象转换为base64位编码
      let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime)
      if (navigator.userAgent.indexOf('Trident') > -1) {
        // IE11
        let arr = imageUrl.split(',')
        // atob() 函数对已经使用base64编码编码的数据字符串进行解码
        let bstr = atob(arr[1])
        let bstrLen = bstr.length
        // Uint8Array, 开辟 8 位无符号整数值的类型化数组。内容将初始化为 0
        let u8arr = new Uint8Array(bstrLen)
        while (bstrLen--) {
          // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
          u8arr[bstrLen] = bstr.charCodeAt(bstrLen)
        }
        //  msSaveOrOpenBlob 方法允许用户在客户端上保存文件,方法如同从 Internet 下载文件,这是此类文件保存到“下载”文件夹的原因
        window.navigator.msSaveOrOpenBlob(new Blob([u8arr], {type: mime}), fileName + '.png')
      } else {
        // 其他浏览器
        let $a = document.createElement('a')
        $a.setAttribute('href', imageUrl)
        $a.setAttribute('download', fileName)
        $a.click()
      }
    }
  }
}
//调用
exportCharts('myPic') //导出名为myPic.png的图片

需要注意的是导出为.png.jpg不同格式的时候需要做的改动
相信你也看到了需要修改的两个地方就是上述函数中出现png的两个地方,但是,并不是直接将两个png直接替换成jpg就行了,具体修改如下:

...
let mime = 'image/jpeg'
...
window.navigator.msSaveOrOpenBlob(new Blob([u8arr], {type: mime}), fileName + '.jpg')
...

这样,导出的图片格式才是jpg

猜你喜欢

转载自blog.csdn.net/weixin_43443341/article/details/92785061
今日推荐