vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue a标签下载图片至zip包

vue项目通过a标签下载图片至zip包的示例代码

作者:丝绒拿铁有点甜

在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,本文就是介绍使用a标签下载图片的用法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下

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

1、图片下载

// 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压缩包

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);
});

到此这篇关于vue项目通过a标签下载图片至zip包的示例代码的文章就介绍到这了,更多相关vue a标签下载图片至zip包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文