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
。