下载音频(MP3)解决跨域,不跳转界面,直接下载

news2024/12/24 2:31:26

需求

项目需求,将通话记录下载下来,要求不跳转界面直接下载。

效果

请添加图片描述

代码

	// 下载录音
    downloadRecording(data) {
      const url = data.url
      const fileName = '录音.mp3'
      this.getOSSBlobResource(url).then(res => {
        this.saveFile(res, fileName)
      })
    },
    getOSSBlobResource(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.setRequestHeader('Cache-Control', 'no-cache')
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }
        xhr.send()
      })
    },
    // 保存文件
    saveFile(data, fileName) {
      const exportBlob = new Blob([data])
      const saveLink = document.createElement('a')
      document.body.appendChild(saveLink)
      saveLink.style.display = 'none'
      var urlObject = window.URL.createObjectURL(exportBlob)
      saveLink.href = urlObject
      saveLink.download = fileName
      saveLink.click()
      document.body.removeChild(saveLink)
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1409108.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

车载显示,“激斗”与“换代”

编者按:车载显示,正在进入新一轮变革周期。 车载显示作为汽车智能化的重要交互终端,在过去几年,持续受益车企的大屏化、多屏化配置趋势,部分头部厂商赚得盆满钵满。 比如,作为京东方旗下唯一的车载显示模组…

apipost和curl收不到服务器响应的HTTP/1.1 404 Not Found

windows的apipost发送请求后,服务器响应了HTTP/1.1 404 Not Found,但是apipost一直显示发送中。 linux上的curl也一样。 使用wireshark抓包发现收到了响应,但是wireshark识别不了(图中是回应404后关闭了连接)&#xff…

描绘未知:数据缺乏场景的缺陷检测方案

了解更多方案内容,欢迎您访问官网:neuro-T | 友思特 机器视觉 光电检测;或联系销售经理:18124130753 导读: 深度学习模型帮助工业生产实现更加精确的缺陷检测,但其准确性可能受制于数据样本的数量。友思特…

from sklearn.preprocessing import LabelEncoder的详细用法

sklearn.preprocessing 0. 基本解释1. 用法说明2. python例子说明 0. 基本解释 LabelEncoder 是 sklearn.preprocessing 模块中的一个工具,用于将分类特征的标签转换为整数。这在许多机器学习算法中是必要的,因为它们通常不能处理类别数据。 1. 用法说…

校园跑腿小程序源码系统+代取快递+食堂超市代买+跑腿 带完整的安装代码包以及搭建教程

随着移动互联网的普及,人们越来越依赖于手机应用来解决日常生活中的各种问题。特别是在校园内,由于快递点距离宿舍较远、食堂排队人数过多等情况,学生对于便捷、高效的服务需求愈发强烈。在此背景下,校园跑腿小程序源码系统应运而…

一款相对比较强大的国产ARM单片机HC32F4A0

已经用了3年的HC32F4A0,已经对它比较熟悉了,与STM32相比它的外设使用这些的确是挺大大,不像GD32一类的单片机很多都能兼容STM32。用久了之后就更喜欢用HC32F4A0,功能强大,外设使用灵活,用点向FPGA靠拢的感觉…

模型选择实战

我们现在可以通过多项式拟合来探索这些概念。 import math import numpy as np import torch from torch import nn from d2l import torch as d2l生成数据集 给定x,我们将使用以下三阶多项式来生成训练和测试数据的标签: max_degree 20 # 多项式的最…

第四十周:文献阅读+GAN

目录 摘要 Abstract 文献阅读:结合小波变换和主成分分析的长短期记忆神经网络深度学习在城市日需水量预测中的应用 现有问题 创新点 方法论 PCA(主要成分分析法) DWT(离散小波变换) DWT-PCA-LSTM模型 研究实…

Tomcat Notes: Web Security, HTTPS In Tomcat

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial,owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、Overview2、Two Levels Of Web Securi…

运用ETLCloud快速实现数据清洗、转换

一、数据清洗和转换的重要性及传统方式的痛点 1.数据清洗的重要性 数据清洗、转换作为数据ETL流程中的转换步骤,是指在数据收集、处理、存储和使用的整个过程中,对数据进行检查、处理和修复的过程,是数据分析中必不可少的环节,对…

Maps基础知识

什么是Maps? 在JavaScript中,Map是一种用于存储键值对的数据结构。它类似于对象,但有一些区别。 Map对象允许任何类型的值作为键(包括对象、函数和基本数据类型),而对象只能使用字符串或符号作为键。这使得…

一次性密码 One Time Password,简称OTP

一次性密码(One Time Password,简称OTP),又称“一次性口令”,是指只能使用一次的密码。一次性密码是根据专门算法、每隔60秒生成一个不可预测的随机数字组合,iKEY一次性密码已在金融、电信、网游等领域被广…

three.js中Meshline库的使用

three.js中Meshline的使用 库的地址为什么要使用MeshLine,three.js内置的线不好用吗?MeshLine入门MeshLine的深入思考样条曲线一个问题 库的地址 https://github.com/spite/THREE.MeshLine?tabreadme-ov-file 为什么要使用MeshLine,three.js内置的线不好用吗? 确实不好用,…

一个监控小技巧,巧妙破解超低温冰箱难题!

在当今科技飞速发展的时代,超低温冰箱监控系统以其在各行各业中关键的温度控制和环境监测功能而备受关注。 超低温环境对于存储生物样本、药品和其他温度敏感物品至关重要,而监控系统则提供了实时、精准的环境数据,确保这些物品的质量和安全性…

(2)Elastix图像配准:参数文件(配准精度的关键)

文章目录 前言一、Elastix简介二、参数文件(类型)三、参数文件(定义):由多个组件组成,每个组件包含多个参数。3.1、组件的相关参数3.2、图解组件3.2.1、图解 - 金字塔(pyramid)3.2.2…

Mediasoup Demo-v3笔记(二)——server.js和room.js分析

server.js 主要运行逻辑 async function run() {// Open the interactive server.await interactiveServer();// Open the interactive client.if (process.env.INTERACTIVE true || process.env.INTERACTIVE 1)await interactiveClient();// Run a mediasoup Worker.await…

基于node.js和Vue3的医院挂号就诊住院信息管理系统

摘要: 随着信息技术的快速发展,医院挂号就诊住院信息管理系统的构建变得尤为重要。该系统旨在提供一个高效、便捷的医疗服务平台,以改善患者就医体验和提高医院工作效率。本系统基于Node.js后端技术和Vue3前端框架进行开发,利用其…

spring中循环依赖问题、Servlet 的过滤器与 Spring 拦截器区别

spring中的循环依赖问题 当A类中关联B,B类中关联A class A {B b; } class B {A a; } 正常java代码中new A时,b为null;new B时,a为null; 但是在spring中,由于对象是由spring容器管理的,当创建…

Netty Reactor 模式解析

目录 Reactor 模式 具体流程 配置 初始化 NioEventLoop ServerBootstrapAcceptor 分发 Reactor 模式 在刚学 Netty 的时候,我们肯定都很熟悉下面这张图,它就是单Reactor多线程模型。 在写Netty 服务端代码的时候,下面…

vue 解决:Module not found: Error: Can‘t resolve ‘vue-router‘ 的问题

1、问题描述: 其一、报错为: Module not found: Error: Cant resolve vue-router 中文为: 找不到模块:错误:无法解析“vue-router” 其二、问题描述为: 根据报错的中文信息可知:应该是无法…