vue点击事件下载音频（浏览器）（幼儿园理解级别）

 methods: {
//下载mp3调用的方法，这边你拷过去就行了，原理是啥的话有人问你就说举个栗子：没有栗子
//这边downloadMp3(filePath)的filePath就是点击事件传过来的地址啦。然后他就会下载了。
downloadMp3(filePath) {fetch(filePath).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 = '';a.click();document.body.removeChild(a)
// 移除blob对象的urlwindow.URL.revokeObjectURL(url);});
},
//绑定的点击事件为down，就举个栗子@click=“down（record）”你懂的。没record就放空就好了down(record,type,index){
//调用downloadMp3函数方法，传一个地址给这个函数，举个栗子：http：//某MP3或者mouMP4文件,如果后台获取的就像我那样子传进去一个视频或者音频地址就行。
this.downloadMp3(record.data.audioUrl)},

看见没，你别觉得难，这个能用。没有多余数据，你拷了都能用的宝。

不信我给你举个栗子：=》》》》》》》》》》》》》》》》》》》》》》》》》诶呦，没有。

没接口，又觉得看不懂就如下：

 methods: {
//下载mp3调用的方法，这边你拷过去就行了，原理是啥的话有人问你就说举个栗子：没有栗子
//这边downloadMp3(filePath)的filePath就是点击事件传过来的地址啦。然后他就会下载了。
downloadMp3(filePath) {fetch(filePath).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 = '';a.click();document.body.removeChild(a)
// 移除blob对象的urlwindow.URL.revokeObjectURL(url);});
},
//绑定的点击事件为down，就举个栗子@click=“down（record）”你懂的。没record就放空就好了down(record,type,index){
//调用downloadMp3函数方法，传一个地址给这个函数，举个栗子：http：//某MP3或者mouMP4文件,如果后台获取的就像我那样子传进去一个视频或者音频地址就行。
this.downloadMp3("https://1500011187.vod2.myqcloud.com/6caa1afavodcq1500011187/bff884aa387702298755519788/nfavaVJ4FdoA.mp4")},

这总看的懂了吧，直接拷贝加个点击事件都能触发的宝。

vue点击事件下载音频（浏览器）（幼儿园理解级别）相关推荐

vue点击事件会刷新浏览器回到主页解决办法
加个prevent阻止冒泡就好了 @click.prevent="toLink"
vue点击事件，循环出来的关注列表，点击只关注其中一个并改变样式
vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template><ul ...
Vue点击按钮下载对应图片
最近有用到点击某个按钮自动下载对应图片,可是对于浏览器不同的问题,会有'个别'浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue 点击事件传递多个参数_vue传事件参数
大家好,今天给大家分享的是vue传事件参数,希望大家喜欢. 在vue中传递事件参数还是比较常见的. 当然这种情况基本上是在html中标签中如何写这个问题上大家存在疑问. 那么这里我就分别举例说下. 1 ...
vue 点击事件失效检查办法
第一使用控制台检测看你一下你的元素控件的真实size是不是根本没有撑起来加上样式把界面撑起来 height: 100%;width: 100%; 检测一下margin之类的使用的控件本身问题设 ...
vue点击事件不生效
vue @click.native 原生点击事件: 1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子 ...
[Vue]点击事件获取元素本身及事件
<button @click = "clickfun($event)">点击</button>methods: {clickfun(e) {// e.tar ...
vue 点击事件失效
点击事件失效的情况,总共有三种 1. 没有点到那个元素,比如说div>span 事件绑定在div上,但是它可能点来点去是在span标签上面,这种情况,把@click点击事件绑定到span上测试一 ...

vue点击事件下载音频（浏览器）（幼儿园理解级别）

vue点击事件下载音频（浏览器）（幼儿园理解级别）相关推荐

最新文章

热门文章