问题描述

昨天拿到一个需求,就是做成这种下载的模样

后台返回的下载链接长成这样

解决方法

就是一个最普通的方法,创建a标签 ,加上download属性,模拟标签点击 就可以触发下载了
注意:这个是因为直接拿到了请求链接,get请求

	const SERVER_PATH = `${window.location.origin}/ai/aiServer/`;const alink = document.createElement('a');alink.style.display = 'none'alink.href = `${SERVER_PATH}${downloadUrl}`;alink.download = '';document.body.appendChild(alink)alink.click();URL.revokeObjectURL(alink.href) // 释放URL 对象document.body.removeChild(alink)

拓展 另一种文件流下载

通过请求完成接收到的blob 然后再调用a链接下载
这是参考了这个同学的做法,使用的是fetch请求

requestMusicData(item,index){//请求并且传递音乐名称fetch('/music/file?name='+item.innerText,{method: 'get',responseType: 'blob'}).then(res => {     return res.blob();}).then(blob => {let bl = new Blob([blob], {type: "audio/m4a"});let fileName = Date.parse(new Date())+".m4a";var link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);})
}