通常下载文件我们会用到 <a>
标签,但是 a 标签在下载音频的时候会跳转到一个新页面进行播放,不会直接下载,这与我们的需求南辕北辙。这里我通过查询资料,找到了两种方式(原理想通,也可以理解为一种):将文件转化为blob对象的二进制数据流下载。
前提:这里我的音频文件是上传到腾讯云的,这里基于 腾讯云 的url进行下载。
axios 方式下载
js
axios({
method: 'get',
url: row.audioUrl,
// 必须显式指明响应类型是一个Blob对象,这样生成二进制的数据,才能通过window.URL.createObjectURL进行创建成功
responseType: 'blob',
}).then((res) => {
// 将lob对象转换为域名结合式的url
let blobUrl = window.URL.createObjectURL(res.data)
let link = document.createElement('a')
document.body.appendChild(link)
link.style.display = 'none'
link.href = blobUrl
// 设置a标签的下载属性,设置文件名及格式,后缀名最好让后端在数据格式中返回
link.download = row.theme ? row.theme + '.wav' : '会议录音.wav';
// 自触发click事件
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(blobUrl);
})
fetch
js
fetch(row.audioUrl).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 = row.theme ? row.theme + '.wav' : '会议录音.wav';
a.click();
document.body.removeChild(a)
// 移除blob对象的url
window.URL.revokeObjectURL(url);
});
补充:
如果是 txt \ word 文档等文件,可以通过 a 标签的方式进行下载。
js
const downloadFileA = document.createElement('a')
document.body.append(downloadFileA)
downloadFileA.href=`https://xxx`
downloadFileA.download = '下载文件.csv'
// 超链接 target="_blank" 要增加 rel="noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。(摘要)
downloadFileA.rel = 'noopener noreferrer'
downloadFileA.click()
document.body.removeChild(downloadFileA)