泉州网站设计公司,公司注册地址和办公地址,手机购物网站 设计,php建设图书网站代码前言
一开始用的是循环单个文件下载#xff0c;即从后台获取到文件url列表#xff0c;循环对每个url单独进行下载#xff0c;这样的问题是每调用一次下载#xff0c;浏览器都会进行“另存为”的弹框#xff0c;很麻烦#xff01;#xff01;#xff01;
关闭“下载前…前言
一开始用的是循环单个文件下载即从后台获取到文件url列表循环对每个url单独进行下载这样的问题是每调用一次下载浏览器都会进行“另存为”的弹框很麻烦
关闭“下载前询问每个文件的保存位置”又不是我想要的这样就不提示保存位置直接下载到浏览器的默认位置。而且按网上的方法在程序代码里不让它弹“另存为”的弹框也不起作用具体方法放到了参考文章中。
所以就产生了批量下载并打压缩包的想法。
解决方法
1、下载插件
npm install jszip
npm install file-saver
注 install完成后会自动在package-lock.json和package.json中添加上所需依赖。
2、在vue文件中使用
import JSZip from jszip
import FileSaver from file-saver
3、下载文件以及打包方法 /**文件打包* 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)});console.log(aaaa,arrImages);for (let item of arrImages) {console.log(item,item)// 下载文件, 并存成ArrayBuffer对象const promise this.getImgArrayBuffer(item.fileStaticUrl).then(data { // 获取文件名const file_name encodeURIComponent(item.fileId) // 逐个添加文件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 正在压缩;// 利用file-saver保存文件 自定义文件名FileSaver.saveAs(content, filename); _this.title 压缩完成;});loading.close();}).catch(res{_this.$message.error(文件压缩失败);loading.close();});}, getImgArrayBuffer(url) {return new Promise((resolve, reject) {//通过请求获取文件blob格式let xmlhttp new XMLHttpRequest();xmlhttp.open(GET, url, true);xmlhttp.responseType blob;xmlhttp.onload function () {if (this.status 200) {resolve(this.response);} else {reject(this.status);}};xmlhttp.send();});},
4.获取文件url列表 getFileUrls() { this.$http({url: this.$http.adornUrl(/fileSystemApi/fileInfo/batch/download),method: post,data: {fileInfoList: this.dataListSelections,updateBy: this.$cookie.get(username)},}).then(({ data }) {console.log(getFileUrls,data)this.fileInfoList data.data.fileInfoList;console.log(sd,this.fileInfoList) this.filesToRar(this.fileInfoList, this.getTimestamp());});},
获取的fileInfoList即第3步中的arrImages时间戳当做压缩包的文件名
5.在data中定义变量
data() {return {dataForm: {id: ,bucketId: ,fileId: ,fileType: ,syscode: ,fileCustno: ,createTime: ,},dataList: [],dataListSelections: [], // 选中数据dataIdListSelections: [], // 选中iddataListLoading: false,currPage: 1,pageSize: 10,totalCount: 0,url: ,fileInfoList: ,dialogVisible: false,};},
6.点击按钮
templatediv!-- 省略其他... --el-form:inlinetrue:modeldataFormkeyup.enter.nativegetDataList()el-form-itemel-button typeprimary clickgetFileUrls()批量下载/el-button/el-form-item/el-form/div
/template
参考文章
https://blog.csdn.net/qq_47498423/article/details/131191964
http://www.taodudu.cc/news/show-5240586.html?actiononClick
https://code84.com/821872.html
http://www.taodudu.cc/news/show-4791614.html?actiononClick
循环单个文件下载的方式
https://blog.csdn.net/qq_41131745/article/details/128861548
https://blog.csdn.net/qq_42840904/article/details/131582093
https://ask.csdn.net/questions/7733361
https://blog.csdn.net/weixin_52268321/article/details/130465839
https://www.5axxw.com/questions/simple/qq469i
https://blog.csdn.net/weixin_43227235/article/details/130227361
