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);
});
相关推荐
egghead263162 分钟前
trae+react+tailwindcss项目开发
前端·react.js
前端啵啵猪2 分钟前
基于qiankun实现子应用菜单级keep-alive
前端·javascript
徐小夕2 分钟前
写了一款3D可视化编辑器模版,开源!
前端·javascript·github
酱酱子耶5 分钟前
async没有了await会发生什么?实际问题
前端·react.js
windliang11 分钟前
Cursor 写一个网页标题重命名的浏览器插件
前端·浏览器
JavaDog程序狗14 分钟前
【前端】前端 CSS 原子化,代码乐高随便搭
前端·css
只可远观15 分钟前
Mac搭建Flutter IOS环境详细指南
前端·flutter·macos·ios
程序员马晓博16 分钟前
还是聊聊吧:"大龄"程序员失业的一年
前端·程序员
忧郁的蛋~32 分钟前
开发vue项目所需要安装的依赖包
前端·javascript·vue.js