js文件下载与下载进度计算

// 记录某个需求

下载文件用的JSZip打包下载

npm install jszip
yarn install jszip

将下载的多个文件循环用axios下载,并在axios里添加onDownloadProgress监听事件

// onDownloadProgress axios在下载时会定时调用onDownloadProgress,返回事件里有当前下载的进度e.loaded

let res: any = await request({
      url: url,
      method: 'get',
      responseType: 'blob',
      onDownloadProgress: (e) => {
        let itemData = deepClone(fileList[i])
        fileList[i].percentage = Math.ceil((e.loaded / itemData.fileSize) * 100)
      }
});

等待当前循环体的res请求结果返回,插入进jszip

// zip.file函数里,文件名称前面可跟文件目录名,如果没有就创建

zip.file('xxx.png', res);

最后调用zip.generateAsync完成文件打包下载

zip.generateAsync({ type: 'blob' }).then((content) => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(content);
    link.download = 'files.zip';
    link.click();
    useMessage().success('下载完成,请打开浏览器下载目录查看!')
});