脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue a标签下载图片至zip包

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

 更新时间：2023年10月09日 08:34:30   作者：丝绒拿铁有点甜  
在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包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vite 打包目录结构自定义配置小结

    Vite 打包目录结构自定义配置小结

    在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义打包目录结构,感兴趣的可以了解一下
    2025-08-08
  • Vue关于组件化开发知识点详解

    Vue关于组件化开发知识点详解

    在本篇文章里，小编给大家分享的是关于Vue关于组件化开发知识点详解内容，有兴趣的朋友们可以学习下。
    2020-05-05
  • vue搭建简易前端的思路及问题详解

    vue搭建简易前端的思路及问题详解

    这篇文章主要介绍了如何使用Vue和ElementPlus构建前端页面,特别是如何进行跨域请求和使用Vue Router进行路由管理,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 基于Vue实现电商SKU组合算法问题

    基于Vue实现电商SKU组合算法问题

    这篇文章主要介绍了基于Vue实现电商SKU组合算法问题 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue.js学习记录之在元素与template中使用v-if指令实例

    Vue.js学习记录之在元素与template中使用v-if指令实例

    这篇文章主要给大家介绍了关于Vue.js学习记录之在元素与template中使用v-if指令的相关资料，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • vue学习笔记之v-if和v-show的区别

    vue学习笔记之v-if和v-show的区别

    本篇文章主要介绍了vue学习笔记之v-if和v-show的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于vue-simplemde实现图片拖拽、粘贴功能

    基于vue-simplemde实现图片拖拽、粘贴功能

    这篇文章主要介绍了基于vue-simplemde实现图片拖拽、粘贴功能,需要的朋友可以参考下
    2018-04-04
  • vue+echarts实现动态折线图的方法与注意

    vue+echarts实现动态折线图的方法与注意

    这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论