场景： 后端返回的下载链接为cdn链接，而cdn链接不能直接作为下载的链接地址
解决方案（步骤）：
1. 向后端请求得到CDN的下载地址
2. 通过ajax的方式向cdn链接请求
3. 将请求得到的结果转成二进制流
4. 再将其变成一个下载的链接赋值给a标签的href属性，并自动触发a标签的下载
// 这里是批量下载，请求的谷歌云的链接 const ajax = (url, callback, options) => { window.URL = window.URL || window.webkitURL; const xhr = new XMLHttpRequest(); xhr.open('get', url, true); if (options.responseType) { xhr.responseType = options.responseType; } xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr); } }; xhr.send(); }; // 生成符合可以请求的地址 const downloadAjax = (url) => { const innerurl = url; // 文件地址 const name = url.replace(/(.*\/)*([^.]+).*/ig, '$2'); let filename = `${name}.${innerurl.replace(/(.*\.)/, '')}`; filename = filename?.split('?')[0]; return new Promise((resolve) => { ajax(innerurl, (xhr) => { const p = { xhr, filename }; resolve(p); }, { responseType: 'blob', }); }); }; const downUrlList = [] // 这里是链接的数组 const arr = []; for (let index = 0; index < downUrlList?.length; index++) { const url = downUrlList[index]; arr.push(downloadAjax(url?.replace('http://1.2.3.4', '/gcp'))); // 本地就需要切换成这个 由于会跨域：'http://1.2.3.4' 这个就需要替换 // arr.push(downloadAjax(url)); // 生产环境配置好跨域，直接传url就行，在开发环境就需要进行代理解决跨域问题 } Promise.all(arr).then((res) => { res.forEach((i) => { const { xhr, filename } = i; const content = xhr?.response; const a = document.createElement('a'); const blob = new Blob([content]); const urls = window.URL.createObjectURL(blob); a.href = urls; a.download = filename; a.click(); window.URL.revokeObjectURL(urls); }); })有不当之处还望各位大佬指点
原文链接：https://blog.csdn.net/weixin_48092226/article/details/120444130?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782395318700%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782395318700&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-19-120444130-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/178
