vue项目通过a标签下载图片至zip包

在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,以下就是介绍使用a标签下载图片的用法:

1、图片下载

js 复制代码
// url为网络图片地址
axios
.get(url, {
  responseType: "blob",
  withCredentials: false,
})
.then((e) => {
  const href = URL.createObjectURL(e.data);
  const aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = href;
  aLink.download = "图片测试.png";
  aLink.click();
  URL.revokeObjectURL(url);
});

2、图片下载成zip压缩包

js 复制代码
axios
.get(url, {
  responseType: "blob",
  withCredentials: false,
}).then((e) => {
  const blob = new Blob([e], { type: "application/zip" });
  const url = URL.createObjectURL(blob);
  const aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = url;
  aLink.setAttribute("download", new Date() + ".zip");
  document.body.append(aLink);
  aLink.click();
  document.body.removeChild(aLink);
  URL.revokeObjectURL(url);
});
相关推荐
用户458203153172 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战3 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu4 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼5 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
落笔忆梦7 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安7 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码8 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖8 分钟前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer
三十_10 分钟前
【Docker】学习 Docker 的过程中,我是这样把镜像越做越小的
前端·后端·docker
Mintopia10 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc