vue外部按钮下载echarts图片

vue外部按钮下载echarts图片
downloadCharts () {
let aLink = document.createElement(‘a’)
let blob = this.base64ToBlob()
let evt = document.createEvent(‘HTMLEvents’)
evt.initEvent(‘click’, true, true)
aLink.download = ‘监测统计图’ // 下载图片的名称
aLink.href = URL.createObjectURL(blob)
aLink.click()
// window.location.href = url
},
exportImg () { // echart返回一个 base64 的 URL
return this.myChart.getDataURL({
pixelRatio: 1, // 导出的图片分辨率比率,默认是1
backgroundColor: ‘#fff’, // 图表背景色
excludeComponents: [// 保存图表时忽略的工具组件,默认忽略工具栏
‘toolbox’
],
type: ‘png’// 图片类型支持png和jpeg
})
},
base64ToBlob () { // 将base64转换blob
let img = this.exportImg()
let parts = img.split(‘;base64,’)
let 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)
}
return new Blob([uInt8Array], {
type: contentType
})
},