纯javascript前端实现base64图片下载(兼容IE10+)

文章标题：纯JavaScript前端实现Base64图片下载（兼容IE10+）——长沙网络推广经验分享

背景介绍：

在Web应用开发中，我们经常需要实现图片的下载功能，特别是在需要导出图表类应用时。在大多数现代浏览器（如Chrome）中，实现Base64图片的下载相对容易。但在Internet Explorer（IE）浏览器中，实现这一功能需要一些特别的处理。长沙网络推广团队在实践中积累了丰富的经验，现在将这一技巧分享给大家，希望能对大家的学习和工作有所帮助。

主要内容：

一、现代浏览器中的Base64图片下载

在Chrome等现代浏览器中，我们可以通过以下步骤实现Base64图片的下载：

1. 创建一个a标签（锚标签）。

2. 将a标签的href属性设置为图片的Base64编码。

3. 为a标签设置download属性，以指定下载文件的名称。

4. 触发a标签的点击事件。

二、IE浏览器中的Base64图片下载

在IE浏览器中，上述方法无法正常工作。IE浏览器提供了一个特定的方法window.navigator.msSaveOrOpenBlob来实现文件下载。我们可以按照以下步骤在IE浏览器中实现Base64图片的下载：

1. 从Base64编码的图片数据中提取二进制数据。

2. 创建Blob对象。

3. 调用window.navigator.msSaveOrOpenBlob方法，传入Blob对象和下载文件名，以触发IE浏览器的下载流程。

详细步骤和代码实现：

1. 获取图片的Base64编码。此处仅为示例，实际使用时需自行将图片编码为Base64格式。

2. 判断当前浏览器是否支持window.navigator.msSaveOrOpenBlob方法。如果支持，则按照IE浏览器的处理方式下载图片；否则，按照现代浏览器的方式处理。

```javascript

const imgUrl = 'data:image/png;base64,...'; // 这里是获取到的图片Base64编码

if (window.navigator.msSaveOrOpenBlob) {

// 如果是在IE浏览器中，则按照以下方式处理

var bstr = atob(imgUrl.split(',')[1]); // 提取二进制数据

var n = bstr.length;

var u8arr = new Uint8Array(n); // 创建Uint8Array类型的数组

while (n--) {

u8arr[n] = bstr.charCodeAt(n); // 将二进制数据存入数组

}

var blob = new Blob([u8arr]); // 创建Blob对象

window.navigator.msSaveOrOpenBlob(blob, 'chart-download.png'); // 调用IE浏览器的方法，触发下载流程

} else {

// 如果是在现代浏览器中，则按照以下方式处理

const a = document.createElement('a'); // 创建a标签

a.href = imgUrl; // 设置a标签的href属性为图片的Base64编码

a.setAttribute('download', 'chart-download'); // 设置a标签的download属性，指定下载文件名

a.click(); // 触发a标签的点击事件，开始下载图片

}

```

以上就是纯JavaScript前端实现Base64图片下载的方法，兼容IE10+浏览器。希望对大家的学习和工作有所帮助，也感谢大家对长沙网络推广的支持。如有任何疑问或建议，欢迎联系我们。也请大家多多关注狼蚁SEO。