JS-a标签下载文件

问题描述

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

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

解决方法

就是一个最普通的方法,创建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 => {
        const bl = new Blob([blob], {type: "audio/m4a"});
        const fileName = Date.parse(new Date())+".m4a";
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(bl);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
    })
}