vue+JSZip+FileSaver批量压缩下载文件

最新推荐文章于 2024-08-28 17:48:43 发布

原创

最新推荐文章于 2024-08-28 17:48:43 发布 · 678 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

需要的功能是批量下载并压缩xlsx文件，后端传给我的数据是下载链接。网络上搜索到的都是用promise解决异步获取文件的问题，但是我使用时候会出现文件错乱互相覆盖（原因是啥我也没研究明白），导致下载的文件名对，文件内容不对的诡异情况，研究过后只能轮询转化，即一次转换文件成功后再重新循环转化。

首先是依赖包的下载，用到的是JSZip和FileSaver

npm install jszip
npm install file-saver

然后在自己封装方法的文件夹里创建一个js文件zipBatch.js，内容如下：

import JSZip from "jszip";
import FileSaver from "file-saver";//引入依赖包

let zipBatch = {};//方法名，调用时候用
let fileIndex = 0; //轮循脚标，轮循一次，fileIndex++
let fileList = [];  //存放转化完成的文件的数组
let arrSource = []; //原始数据
let blogTitle = ''; //压缩包的名称
zipBatch.zip = (arr,title) =>{
	//参数arr是原始数据，每个元素两个属性 path 文件链接 ，title 文件名称
	//参数title是压缩完成的压缩包名
	fileList = [];
	arrSource = arr;
	blogTitle = title;
	fileIndex = 0;
	zipBatch.addLoop();
}
zipBatch.addLoop = () =>{
	l