利用a标签下载图片

最新推荐文章于 2025-04-05 14:46:42 发布

youngjqz

最新推荐文章于 2025-04-05 14:46:42 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 javascript 文章标签： a download 图片下载

本文链接：https://blog.youkuaiyun.com/youngjqz/article/details/84105574

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

本文介绍了一种在前端实现图片下载的方法，特别针对后端返回的base64格式图片数据。通过创建a标签并设置其href属性为base64图片数据，再通过click事件触发下载，实现了无缝的图片下载体验。

一般场景下

<a href="/images/myw3schoolimage.jpg" download="w3logo">

联合后端进行图片下载
如果后端传过来的图片数据是base64格式的

let src = `data:image/png;base64,${res.data}`; //  res.data即为转成base64格式的图片数据
let a = document.createElement("a");
a.href = src;    //  href链接指向图片的地址
a.download = "运单.png";   //  下载的图片的名称
a.click();    //  触发a标签的单击事件