vue3 批量下载功能

已于 2022-04-19 10:44:21 修改
阅读量1.1k 收藏 2
点赞数 3
分类专栏： vue3 文章标签： vue
于 2022-03-22 10:49:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44325341/article/details/123654732
版权

本来我是这样写的

将所有选中的条例的url放到数组checkedurl里（具体请看另一篇文章全选单选）

（类似于单条下载的时候直接用a标签）

但是后来发现有问题 因为a.click（）只会自动执行最后一个

所以在选择很多 的情况下 他只下载最后一个

网上搜索资料 发现大家用的不是a 而是iframe 即把上面的代码的a都换成iframe

然后就不用.click 直接就会下载 ，但需要setTimeout的时间长一些 大概五分钟比较合适

也可以实现批量下载

但这样的弊端是 当数据太多时 比如几十几百条 这样就不太合适 

所以我最终选择了  调用接口，返给后端我所选中的条例的id  然后返回来给我一个zip压缩包 

我再像最上面那样创建一个a 然后a.click  完成了这个功能

SonderJie
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3origin.zip
08-15
一个vue@cli3搭建的初始项目，其中包括rem适配、vant的结合使用
Vue实现表格批量审核功能实例代码
10-16
在Vue.js中实现表格的批量审核功能，主要是通过与用户交互和后端API进行数据交换来完成的。这里我们将详细探讨实现这一功能的关键步骤和涉及的技术点。 首先，前端部分的实现主要涉及到Vue组件的使用，包括表格（`...
vue3批量下载多个文件并打包为压缩包
最新发布
m0_67796383的博客
03-28 619
【代码】vue3批量下载多个文件并打包为压缩包。
【vue】vue项目中批量下载文件并打压缩包
ooooooooooooooxiaosu的博客
09-04 2143
一开始用的是循环单个文件下载，即从后台获取到文件url列表，循环对每个url单独进行下载，这样的问题是每调用一次下载，浏览器都会进行“另存为”的弹框，很麻烦！！！关闭“下载前询问每个文件的保存位置”，又不是我想要的，这样就不提示保存位置，直接下载到浏览器的默认位置。而且按网上的方法，在程序代码里不让它弹“另存为”的弹框，也不起作用（具体方法放到了参考文章中）。所以就产生了批量下载并打压缩包的想法。
vue的批量下载以及多文件压缩包下载代码示例
Jiang_bug的博客
01-10 1175
vue的批量下载和文件压缩下载
vue3实现文件上传、文件下载
weixin_57399180的博客
04-24 5088
vue3实现文件上传、文件下载
vue+element实现批量删除功能的示例
08-27
"Vue+Element实现批量删除功能的示例" Vue是一个基于JavaScript的渐进式框架，Element是一个基于Vue的UI库，两者结合可以快速开发出高质量的Web应用程序。本文将展示如何使用Vue+Element实现批量删除功能的示例。 ...
vue+element+Java实现批量删除功能
10-17
主要介绍了vue+element+Java实现批量删除功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现点击按钮下载文件功能
01-19
项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. $router.push(>查看软件 ...
Vue 中批量下载文件并打包的示例代码
10-18
在Vue.js开发过程中，有时我们需要实现批量下载文件并将其打包成一个压缩文件的功能。本文将详细讲解如何在Vue项目中实现这一功能，主要涉及的技术包括Ajax请求、JSZip库用于文件压缩以及File-Saver库用于保存生成的...
压缩包，使用与vue2，和vue3开发者工具安装
12-21
实现方法 ：参考https://blog.csdn.net/qq_731335498/article/details/122039566
Vue下载图片和批量下载图片
qq_52441253的博客
08-02 846
批量下载图片
vue3批量导出文件，打包成压缩包
kanno的博客
08-28 859
vue3批量导出文件，打包成压缩包
vue3中，下载模板并进行上传导入文件 & 父子组件props传函数两种写法-传动态接口
weixin_44867717的博客
08-31 634
两种写法——fun1.value()和fun2.value(param).then(res)
vue 批量下载照片，打包成zip
理想同学的博客
05-09 953
vue使用jszip file-saver插件图片批量下载。
vue2,vue3下载多个文件打成压缩包
qw_cui的博客
04-21 1023
vue2下载文件打包成压缩包，vue3下载文件打包成压缩包，
多个文件打包下载vue
m0_68428581的博客
10-18 180
1.要求：点击资料下载，打包下载所有文件2.解决
vue中下载多个文件打包为一个zip
qq_43627981的博客
12-21 4222
//下载依赖 // npm i axios, JSZip, FileSaver -s import axios from "axios"; import JSZip from "jszip"; import FileSaver from "file-saver"; const getFile = url => { return new Promise((resolve, reject...
vue实现批量排序功能
12-26
根据提供的引用内容，可以使用Vue实现批量排序功能。具体实现方法如下： 1. 首先，需要设置一个div来放置提示语，这个div放在数字框列表div的下方。 2. 在Vue的data中定义一个数组，用于存储需要排序的数字。 3. 在Vue的methods中定义一个函数，用于进行排序操作。可以使用JavaScript的sort()方法对数组进行排序。 4. 在排序操作完成后，根据需要改动相应的提示语。 5. 在Vue的模板中，使用v-for指令遍历数组，将每个数字显示在页面上。 下面是一个示例代码： ```html <template> <div> <div> <button @click="sortAscending">升序排序</button> <button @click="sortDescending">降序排序</button> </div> <div> <div v-for="num in numbers" :key="num">{{ num }}</div> </div> <div>{{ prompt }}</div> </div> </template> <script> export default { data() { return { numbers: [5, 2, 8, 1, 9], prompt: '' }; }, methods: { sortAscending() { this.numbers.sort((a, b) => a - b); this.prompt = '已按升序排序'; }, sortDescending() { this.numbers.sort((a, b) => b - a); this.prompt = '已按降序排序'; } } }; </script> ``` 在上述代码中，我们使用了两个按钮来触发排序操作，分别是升序排序和降序排序。点击按钮后，会调用相应的排序函数，并更新提示语。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值