js 下载在线视频等多个文件到一个文件夹导出压缩包下载到本地

1.下载插件

npm install file-saver

npm install jszip  

2.引入

import JSZip from "jszip";

import FileSaver from "file-saver";

3.处理数据到文件夹，并且下载压缩包 

// 下载课程
let loading = ref(false)//下载中的页面状态
function download(data) {
  loading.value = true
  const zip = new JSZip(); // 创建一个zip文件
  let promises = []; // 存放所有请求的promise
  data.forEach(async (item, index) => {
        // 这里是通过我自己的接口获取blob类型数据，你们根据自己的方法，也可以使用二进制流，base64
    let promise = cosDownloadFile(item.url, 2).then((blob) => {
      // console.log(blob);
      // 设置文件的名称 后缀从路径中获取，防止文件后缀不一样打不开文件
      zip.file(`文件名.${item.url.split('.').pop()}`, blob, { binary: true });
    })
    promises.push(promise)
  })
  Promise.all(promises)
    .then(() => {
      zip.generateAsync({ type: 'blob' }).then((content) => {
        //利用file-saver保存文件  自定义文件名
        FileSaver.saveAs(
          content,
          "压缩包名称" + ".zip"
        )
        loading.value = false
      })
    })
}

我使用的 blob 类型 也可以使用base64 或者 二进制文件流