这篇文章主要介绍了vue将文件/图片批量打包下载zip的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue将文件/图片批量打包下载
各种格式都可以,只要url能够打开或者下载文件即可.
1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip
由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒
添加依赖
//npm install jszip
//npm install file-saver
在页面的script中引入依赖
import JSZip from ‘jszip’
import FileSaver from ‘file-saver’
代码
/**文件打包 * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}] * filename 压缩包名 * */ filesToRar(arrImages, filename) { let _this = this; let zip = new JSZip(); let cache = {}; let promises = []; _this.title = '正在加载压缩文件'; for (let item of arrImages) { const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => { // 下载文件, 并存成ArrayBuffer对象(blob) zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件 cache[item.renameFileName] = data; }); promises.push(promise); } Promise.all(promises).then(() => { zip.generateAsync({ type: "blob" }).then(content => { _this.title = '正在压缩'; // 生成二进制流 FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名 _this.title = '压缩完成'; }); }).catch(res=>{ _this.$message.error('文件压缩失败'); }); }, //获取文件blob getImgArrayBuffer(url){ let _this=this; return new Promise((resolve, reject) => { //通过请求获取文件blob格式 let xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", url, true); xmlhttp.responseType = "blob"; xmlhttp.onload = function () { if (this<strong style="color:transparent">来源gaodai#ma#com搞@代~码$网</strong>.status == 200) { resolve(this.response); }else{ reject(this.status); } } xmlhttp.send(); }); },
补充知识：vue 生成二维码并且批量打包下载代码
我就废话不多说了，大家还是直接看代码吧~
<div> <div style="width: 450px;height: 475px"> <div id="qrCode"> <p style="text-align: center;font-size: 1.5625rem">{{ codeNumber }}</p></div></div></div> #qrCode { width: 375px; height: 375px; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); img { display: block; width: 100%; height: 100%; } }
调用setarr传数组
以上就是vue将文件/图片批量打包下载zip的教程的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue将文件/图片批量打包下载zip的教程
转载请注明原文链接：vue将文件/图片批量打包下载zip的教程
