js 下载音频的实现方式

embedded/2024/9/25 21:26:48/

通常下载文件我们会用到 <a> 标签，但是 a 标签在下载音频的时候会跳转到一个新页面进行播放，不会直接下载，这与我们的需求南辕北辙。这里我通过查询资料，找到了两种方式（原理想通，也可以理解为一种）：将文件转化为blob对象的二进制数据流下载。

前提：这里我的音频文件是上传到腾讯云的，这里基于腾讯云的url进行下载。

axios 方式下载

 axios({method: 'get',url: row.audioUrl,// 必须显式指明响应类型是一个Blob对象，这样生成二进制的数据，才能通过window.URL.createObjectURL进行创建成功responseType: 'blob',}).then((res) => {// 将lob对象转换为域名结合式的urllet 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

 fetch(row.audioUrl).then(res => res.blob()).then(blob => {const a = document.createElement('a');document.body.appendChild(a)a.style.display = 'none'// 使用获取到的blob对象创建的urlconst url = window.URL.createObjectURL(blob);a.href = url;// 指定下载的文件名a.download = row.theme ? row.theme + '.wav' : '会议录音.wav';a.click();document.body.removeChild(a)// 移除blob对象的urlwindow.URL.revokeObjectURL(url);});

补充：

如果是 txt \ word 文档等文件，可以通过 a 标签的方式进行下载。

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)