网站黑链,xxx网站策划书,wordpress博客转发,巨好用网络企业管理系统背景
文件管理页面#xff0c;后端只提供了一个根据 file_path 和 file_name 参数下载文件的API接口。产品需要支持用户多选之后的批量下载功能。
技术实现
基础代码
先调用下载接口#xff0c;获取到二进制的文件流#xff0c;然后通过 a 标签完成下载。
// return [r…背景
文件管理页面后端只提供了一个根据 file_path 和 file_name 参数下载文件的API接口。产品需要支持用户多选之后的批量下载功能。
技术实现
基础代码
先调用下载接口获取到二进制的文件流然后通过 a 标签完成下载。
// 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 : datareturn 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);
};方案一
循环选中的行在循环中调用下载文件的接口
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 里面都能被打印出来。
所以那么最后只能指向下载文件的问题查阅之后知道浏览器有安全策略如果下载操作过于频繁或者数量过多仍可能被视为不安全的操作而被阻止。
方案二
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.valueif (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一点时间之后再执行下一个分片的下载。可以解决问题。但是提示信息需要优化考虑一次的用户操作更友好的提示用户。
方案三
交由后端处理让后端提供批量下载的接口这里要考虑到当批量下载回来的数据很大时前端和后端需要做的事情。下载压缩文件以及返回数据的分片
总结
最好是用方案三如果后端不支持的话再考虑方案二。
