前端批量下载文件

背景

文件管理页面，后端只提供了一个根据 file_path 和 file_name 参数下载文件的API接口。产品需要支持用户多选之后的批量下载功能。

技术实现

基础代码

先调用下载接口，获取到二进制的文件流，然后通过 a 标签完成下载。

javascript 复制代码

// @return [response, error] 如果请求失败，则 error 有值，response 为null，否则 error 为null
const requestNormalFn = (url, method, data, {
  params = {}, requestConfig = {}, unitModuleName = null, deleteWithBody = false
} = {}) => {
  const requestUuid = genUuid()
  const reqBody = (method === 'delete' && !deleteWithBody) ? null : data
  return wrapAwait(myFetch.request({
    method, url, data: reqBody, params, requestConfig, requestUuid, unitModuleName
  }))
}

// 通过 click a 标签下载文件
let downloadcount = 1
const saveDataToFileForHdf = (data, filename, ext) => {
  downloadcount ++
  let url = URL.createObjectURL(data);
  let link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', `${filename}.${ext}`);
  link.addEventListener('click', function (e) {
    console.log('click', downloadcount, e.target)
  })

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

方案一

循环选中的行，在循环中调用下载文件的接口

javascript 复制代码

const downloadFile = async row => {
  const [response, error] = await requestNormalFn(downloadUrl, 'get', null, {
    params: {
      file_path: row.file_path,
      file_name: row.file_name
    },
    requestConfig: {
      responseType: 'blob'
    }
  })
  if (error) {
    ElMessage({
      type: 'error',
      message: `${row.file_name}下载失败`
    })
    return
  }
  const fileNameArr = row.file_name.split('.')
  const ext = fileNameArr.splice(fileNameArr.length - 1, 1)
  const fileName = fileNameArr.join('.')
  saveDataToFileForHdf(response, fileName, ext[0])
}

const onBatchDownloadClick = rows => {
	rows.forEach(row => downloadFile(row))
}

问题：

当勾选的数据 >= 6时，就开始出现实际下载下来的文件数量小于勾选的数据量，能下载下来的文件数不稳定。

思考：

有以下可能：

请求结果丢失 ------ 后续验证被排除，没有丢失。
生成 a 标签的时候，click 这里被某种安全策略阻止 ------ 后续证明，click 里面都能被打印出来。

所以那么最后只能指向下载文件的问题，查阅之后知道浏览器有安全策略，如果下载操作过于频繁或者数量过多，仍可能被视为不安全的操作而被阻止。

方案二

javascript 复制代码

const requestFile = async row => {
  const [res, err] = await requestNormalFn(downloadUrl, 'get', null, {
    params: {
      file_path: row.file_path,
      file_name: row.file_name
    },
    requestConfig: {
      responseType: 'blob'
    }
  })
  return [res, err, row]
}

const batchDownload = async (rows) => {
  const requestList = rows.map(row => requestFile(row))
  const resList = await Promise.allSettled(requestList)
  resList.forEach(res => {
    const [response, error, row] = res.value
    if (error) {
      failedList.value.push(row.file_name)
      return
    }
    const fileNameArr = row.file_name.split('.')
    const ext = fileNameArr.splice(fileNameArr.length - 1, 1)
    const fileName = fileNameArr.join('.')
    saveDataToFileForHdf(response, fileName, ext[0])
  })
  if (failedList.value.length) {
    ElMessage({
      message: `${failedList.value.join(', ')} 下载失败。`,
      type: 'error'
    })
  }
  return [0, null]
}

// 将长数组分片，进行处理
const dealPartForArray = async (list, cb, batchLength = 10) => {
  const splitNum = Math.ceil(list.length / batchLength)
  for (let i = 0; i < splitNum; i++) {
    const splitList = list.slice(i * batchLength, (i + 1) * batchLength)
    const [, err] = await cb(splitList)
  }
}
// 点击批量下载按钮的时候，将 选中的行 分片处理，每片最多6个数据
const onBatchDownloadClick = rows => {
	dealPartForArray(rows, batchDownload, 6)
}

这里最好wait一点时间之后，再执行下一个分片的下载。可以解决问题。但是提示信息需要优化，考虑一次的用户操作，更友好的提示用户。

方案三

交由后端处理，让后端提供批量下载的接口，这里要考虑到当批量下载回来的数据很大时，前端和后端需要做的事情。（下载压缩文件，以及返回数据的分片）

总结

最好是用方案三，如果后端不支持的话，再考虑方案二。