Vue实现媒体文件下载

音频支持先播放再下载，视频是直接下载

vue

      <el-table-column label="音频" align="center" prop="audioPath" ><template slot-scope="scope"><el-button v-if="scope.row.audioPath!=null" type="text" @click="handlePlay(scope.row)">音频播放</el-button><el-dialog title="音频播放" :visible.sync="dialogVisible" width="40%" :before-close="stop"><template><center><audio:src="src"controls="controls"ref="audio">Your browser does not support the audio element.</audio></center></template></el-dialog></template></el-table-column><el-table-column label="视频" align="center" prop="videoPath" ><template slot-scope="scope"><el-button v-if="scope.row.videoPath!=null" size="mini"type="text"icon="el-icon-edit" @click="handleVideoPlay(scope.row)">视频下载</el-button></template></el-table-column>

data

      videoSrc: "",//音频播放src: "",dialogVisible: false,dialogVideoVisible: false,

methods

    beforeDestroy() {if (this.player) {this.player.dispose()}},//播放音乐组件handlePlay(row) {this.src = row.audioPath;this.dialogVisible = false;this.play();},//播放
play() {this.dialogVisible = true;this.$refs.audio.play();
},
//音频暂停
stop() {this.dialogVisible = false;this.$refs.audio.pause();this.$refs.audio.currentTime = 0;
},//视频下载handleVideoPlay(row) {var name = "download";var url = row.videoPath;var suffix = url.substring(url.lastIndexOf("."), url.length);//跳过浏览直接下载fetch(url).then(res => res.blob()).then(blob => {const a = document.createElement("a");const objectUrl = window.URL.createObjectURL(blob);a.download = name;a.href = objectUrl;a.click();window.revokeObjectURL(objectUrl);})},

Vue实现媒体文件下载相关推荐

vue项目实现文件下载中心:下载、取消下载、列表展示
vue项目实现文件下载中心:下载.取消下载.列表展示实现下载进度条封装JS方法使用store存储文件下载进度列表创建一个列表组件在页面中使用效果展示实现下载进度条平时业务中下载文件方式 ...
vue 图片剪辑_具有vue的媒体多剪辑工具
vue 图片剪辑媒体切割工具 (media-cut-tool) A media multi-cut tool. 媒体多剪辑工具. <template><div id="a ...
前端Vue点击文件下载方案
1.背景有一个后台管理的功能:查看消息推送的日志,日志内容存储在阿里云OSS,数据库保存的是日志的存放地址,文件格式是txt,该文件格式由于浏览器支持打开,所以不会触发下载,会直接从浏览器打开, 浏 ...
vue项目中文件下载（数据流）的实现
在实际项目中,经常会实现文件下载的功能,以下代码基本实现了下载功能的处理,其中包括如果文件不存在获取其他的错误时,接口返回的不是文件数据,而是错误提示的处理. 比如:当下载接口以get或者post请求 ...
vue+axios+springboot文件下载（兼容IE10）
废话不多说,直接上代码 Controller @GetMapping("/download/{file_code}") public void download(@PathVari ...
vue实现word文件下载之开放权限
使用浏览器自带的导出功能此种方法适用于GET请求 window.location.href = 完整的请求地址使用流的形式下载文件后端 InputStream input = null; Out ...
.netcore+vue 实现压缩文件下载
一.前言目前接触的项目中,给定的需求是将系统内所有用户的数据整理好,并保存到文件夹内,目的主要是防止用户在实施人员已配置好的基础上由于不熟悉系统,导致的误删或者误操作.减少实施人员的配置工作.我首先 ...
vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出 exportData () { this.$confirm('确认导出XXXXXX?', { confirmButtonText: '导出', cancelButtonText: '取消' ...
前端vue中实现文件下载的几种方法
第一种前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性这种写法是创造了一个a标签,把地址写到a标签里再用js调用点击,实现访问文件地址就是下载了代码如下: ...

Vue实现媒体文件下载

Vue实现媒体文件下载

vue

data

methods

Vue实现媒体文件下载相关推荐

最新文章

热门文章