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

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

最后

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