1.前端下载,后端跨域处理
const filePath = props.line.path const name = props.line.name fetch(filePath,{method: 'GET',mode: 'no-cors',}).then(res => res.blob()).then(blob => { const a = document.createElement('a'); document.body.appendChild(a) a.style.display = 'none' // 使用获取到的blob对象创建的url const url = window.URL.createObjectURL(blob); a.href = url; // 指定下载的文件名 a.download = name + '.mp3'; a.click(); document.body.removeChild(a) // 移除blob对象的url window.URL.revokeObjectURL(url); })
2.后端返回数据流,前端点击get请求下载
const path = props.line.path || '' const musicName = props.line.musicName || '' this.$http.get(apis.audio_upload_download + `?path=${path}&musicName=${musicName}`).then(response => { let data = response.body var elink = document.createElement('a'); elink.download = musicName + ".mp3"; elink.style.display = 'none'; var blob = new Blob([data], {type : 'audio'});
elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); });