js下载base64格式的图片

最新推荐文章于 2025-10-05 16:47:09 发布

原创最新推荐文章于 2025-10-05 16:47:09 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #base64

教程专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript将Base64编码的图片数据转换为Blob对象，并通过创建a标签实现图片下载的方法。该方法适用于前端开发中，能够帮助开发者在网页上直接下载图片而无需服务器介入。

//下载图片
function download() {
let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........';
this.downloadFile('测试.png', imgData);
}

//下载
function downloadFile(fileName, content) {
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content); //new Blob([content]);

let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);

// aLink.dispatchEvent(evt);
//aLink.click()
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
}

//base64转blob
function base64ToBlob(code) {
let parts = code.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});
}