js 下载音频的实现方式

通常下载文件我们会用到 <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)
相关推荐
新中地GIS开发老师39 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。1 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡1 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
R-G-B1 小时前
【02】大恒相机SDK C#开发 —— 初始化相机,采集第一帧图像
c#·大恒相机sdk·大恒相机初始化·大恒相机采集图像
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm