描述

批量下载文件，下载形式为（压缩包.zip）

⚠️ 警告

使用该方法，是依赖 jszip (opens new window) 和 file-saver (opens new window) 这两个库。 在本 utils 工具库中默认没有安装，需要使用者在自己的项目中安装。
我们推荐版本 jszip@3.7.1 file-saver@2.0.2

1.依赖 jszip 和 file-saver 库安装

yarn add jszip@3.7.1 file-saver@2.0.2

npm i jszip@3.7.1 file-saver@2.0.2

// Make sure to add code blocks to your code group

2.示例

下载zip

<template>
  <div ref="tableWrap"></div>
  <div style="margin-top: 20px">
    <el-button @click="onDownloadZip">下载zip</el-button>
  </div>
</template>

<script>
import batchDownloadZip from 'sf-utils2/lib/expand/batchDownloadZip.js'
export default {
  data() {
    return {
      urls: [
        {
          url: 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.cjs1111.js', // url
          name: 'hellowrold.js' // 文件名
        },
        'https://cdn.jsdelivr.net/npm/sf-utils2/lib/b-utils.min.js'
      ]
    }
  },

  methods: {
    async onDownloadZip() {
      const res = await batchDownloadZip(this.urls, '例子')

      console.log(res)
    }
  }
}
</script>

显示代码 复制代码 复制代码

3.入参说明

3.1 主参数说明

参数	说明	类型	是否必填	默认值
urlList	url 集合	Array<String> Array<Object>	-	-
fileName	导出的文件名，不要加扩展名	String	-	-

如果 urlList 集合里面的参数，既可以是String，又可以是Object。

例子 1：

batchDownloadZip(['http://compassedu.hk/1.img', 'http://compassedu.hk/2.img'], '例子 1')

例子 2：

batchDownloadZip(
  [
    {
      url: 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.cjs1111.js',
      name: 'hellowrold.js'
    },
    'https://cdn.jsdelivr.net/npm/sf-utils2/lib/b-utils.min.js'
  ],
  '例子 2'
)

4.源码

源码，点开查看 👈

import JSZip from 'jszip/dist/jszip.min.js'
import FileSaver from 'file-saver'
import getHttpBlob from '../dom/getHttpBlob'
import isPlainObject from '@/base/isPlainObject'
import isString from '@/base/isString'
import uuid from '@/base/uuid'

/**
 *  批量下载 （压缩包.zip）
 * @param urlList   由 url 拼接成的数组 如：['http://compassedu.hk/1.img', 'http://compassedu.hk/2.img'] 或者
 * [
 *         {
 *           url: 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.cjs1111.js',
 *           name: 'hellowrold.js'
 *         },
 *         'https://cdn.jsdelivr.net/npm/sf-utils2/lib/b-utils.min.js'
 * ],
 * @param fileName  压缩包名称
 * @returns {Promise<*[]>}
 */
export async function batchDownloadZip(urlList = [], fileName) {
  const _urlList = urlList.filter(Boolean)
  const zip = new JSZip()
  const result = []
  const res = await Promise.allSettled(_urlList.map(v => getHttpBlob(v.url || v)))
  res.forEach((v, vi) => {
    let fileName = uuid() // 文件名
    let url = '' // 远程的url地址
    if (isPlainObject(_urlList[vi])) {
      fileName = _urlList[vi].name || _urlList[vi].url?.split('/')?.slice()?.pop()
      url = _urlList[vi].url
    } else if (isString(_urlList[vi])) {
      fileName = _urlList[vi]?.split('/')?.slice()?.pop() || fileName
      url = _urlList[vi]
    }
    if (v.status == 'fulfilled') {
      zip.file(fileName, v.value, {
        binary: true
      })
    }
    result.push({
      ...v,
      url,
      name: fileName,
      binary: v.value
    })
  })
  const blobContent = await zip.generateAsync({
    type: 'blob'
  })
  FileSaver.saveAs(blobContent, `${fileName}.zip`) // 利用file-saver保存文件
  return result
}

export default batchDownloadZip