本文介绍如何使用纯JavaScript实现Base64格式图片的前端下载功能，重点解决IE10+浏览器的兼容性问题。通过区分现代浏览器与IE内核，利用a标签属性或window.navigator.msSaveOrOpenBlob方法，确保图表等图片资源能正确导出。
背景与需求
背景
在Web项目开发期间，图片导出是一项常见需求，特别是在涉及数据图表的应用场景中，用户通常需要将生成的图表保存为本地文件。
现代浏览器下载方案
对于Chrome等现代浏览器，实现Base64格式图片的下载操作相对简单，主要依赖HTML5的a标签特性。
- 首先，动态创建一个a标签元素。
- 将该a标签的href属性设置为图片的Base64编码字符串。
- 同时，为a标签设置download属性，该属性的值将作为下载文件的默认名称。
- 最后，通过程序触发a标签的点击事件，从而启动浏览器的下载流程。
IE浏览器兼容处理
然而，上述标准逻辑在Internet Explorer（IE）浏览器中无法正常运行，直接执行会导致错误。
因此，针对IE浏览器需要采用特殊的处理机制。IE提供了一個专用的API：window.navigator.msSaveOrOpenBlob(blob, download_filename)，调用此方法可直接触发IE的下载行为，操作较为便捷。具体实现步骤如下。
// 截取base64的数据内容（去掉前面的描述信息，类似这样的一段：data:image/png;base64,）并解码为2进制数据
var bstr = atob(imgUrl.split(',')[1])
// 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
var n = bstr.length
// 创建一个Uint8Array类型的数组以存放二进制数据
var u8arr = new Uint8Array(n)
// 将二进制数据存入Uint8Array类型的数组中
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
// 创建blob对象
var blob = new Blob([u8arr])
// 调用浏览器的方法，调起IE的下载流程
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
完整代码实现
完整的实现代码示例如下。
// 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
const imgUrl = 'data:image/png;base64,...'
// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imgUrl.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', 'chart-download')
a.click()
}
以上内容涵盖了Base64图片下载的核心逻辑，希望能为相关开发工作提供参考，欢迎继续关注本站获取更多技术分享。