vue项目批量加载url文件并打包到zip下载

项目里之前是遇到这样一个需求哈，需要根据选择的不同动态批量生成并下载图片，
而且这个图片不是一张一张生成下载，而是要等他选好条件之后，
把对应的图片动态生成后打包到一个zip压缩包里，然后下载，让客户更方便
好吧，我记记我怎么个思路

过程

动态生成图片我之前的博客写到了，在后台生成的可下载。
批量多个的话那就把这个下载图片的url给存到数组里，
遍历链接使用vue里的axios下载返回的promise对象
得到的所有对象，使用file-saver保存到zip文件下载

安装axios JSZip FileSaver 添加获取Promise的方法

cnpm install -S axios
cnpm install jszip
cnpm install file-saver

方法要写在script标签下面 export外面

<script>
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios'const getFile = url => {return new Promise((resolve, reject) => {axios({method:'get',url,responseType: 'arraybuffer'}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString())})})
}
export default {data(){return{}}
}

获取需要下载的url数组

var arrImages=[]
//经过一些业务操作得到对应的url和文件名，存入数组
arrImages.push({fileUrl:fileUrl,renameFileName:renameFileName})//逐条push进去就行

然后把数组和打包好给用户的zip文件名传进这个方法就可以了

代码如下

/**文件打包* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]* filename 压缩包名* */filesToRar(arrImages, filename) {let _this = this;let zip = new JSZip();let cache = {};let promises = [];_this.title = '正在加载压缩文件';const loading = this.$loading({lock: true,text: '正在加载压缩文件',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});for (let item of arrImages) {const promise = getFile(item.fileUrl).then(data => { // 下载文件, 并存成ArrayBuffer对象const file_name = item.renameFileName // 获取文件名zip.file(file_name, data, { binary: true }) // 逐个添加文件cache[file_name] = data})promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then(content => {_this.title = '正在压缩';// 生成二进制流FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名_this.title = '压缩完成';});loading.close();}).catch(res=>{_this.$message.error('文件压缩失败');loading.close();});}

注意这里说的文件名都是要带扩展名的像这样 all.zip img.jpg

最后

希望这篇博客能给你带来帮助

vue项目批量加载url文件并打包到zip下载相关推荐

【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
vue 项目在加载完成之前，显示预置加载动画
vue 项目在加载完成之前,显示预置加载动画自己有一个日记项目,由于服务器带宽很小1MB,在加载之前页面中显示是空白的,就想给它加个前置的动画,这个用户体验更好. 一.实现 1. 定义项目入口如果 ...
vue-router路由懒加载（解决vue项目首次加载慢）
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
使用Idea创建maven项目无法加载pom文件，一直出现Indexing paused during Power Save mode
今天创建一个maven项目,无法加载pom文件, 一直以为是maven的问题,发现自己仓库地址和配置文件地址没有设置错. 于是看了下边中间显示Indexing paused during Power ...
Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）
最近在做 Vue 项目的首屏优化,效果不错,在这里将经验分享给大家,总的优化措施是以下四点. 优化方式1:将项目中用到的图片移动到百度云文件存储优化方式2:使用路由懒加载优化方式3:关闭 sour ...
vue项目中加载使用腾讯地图
在vue-cli脚手架搭建的vue项目里使用到了腾讯地图.看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感 ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
Vue中怎么加载pdf文件
Vue预览pdf文件,我觉得pdfh5方式比较简洁,还有vue-pdf也可以,但是如果文件内容较多的话,vue-pdf就需要做分页处理,就麻烦了:接下来,想分享下我使用pdfh5的代码逻辑.如下:(注 ...

vue项目批量加载url文件并打包到zip下载

vue项目批量加载url文件并打包到zip下载

过程

安装axios JSZip FileSaver 添加获取Promise的方法

获取需要下载的url数组

然后把数组和打包好给用户的zip文件名传进这个方法就可以了

注意这里说的文件名都是要带扩展名的像这样 all.zip img.jpg

最后

vue项目批量加载url文件并打包到zip下载相关推荐

最新文章

热门文章

vue项目批量加载url文件并打包到zip下载

vue项目批量加载url文件并打包到zip下载

过程

安装axios JSZip FileSaver 添加获取Promise的方法

获取需要下载的url数组

然后把数组和打包好给用户的zip文件名传进这个方法就可以了

注意这里说的文件名都是要带扩展名的 像这样 all.zip img.jpg

最后

vue项目批量加载url文件并打包到zip下载相关推荐

最新文章

热门文章

注意这里说的文件名都是要带扩展名的像这样 all.zip img.jpg