vue+element 下载or批量下载.mp3文件

1.后台分页版

<template>
<!-- 通话回推列表 --><div class="CallList" v-loading="loading"><el-row :gutter="12" class="mt10"><el-col :span="24"><el-card shadow="always" class='ml20 mr20'><el-form :inline="true" :model="formInline" label-width="100px" class="demo-form-inline mt20"><el-form-item label="手机号"><el-input v-model="formInline.phone" size="small" clearable></el-input></el-form-item><el-form-item label="接听状态"><el-select v-model="formInline.status" size="small" clearable><el-option label="已接" value="dealing"></el-option><el-option label="振铃未接听" value="notDeal"></el-option><el-option label="ivr放弃" value="leak"></el-option><el-option label="排队放弃" value="queueLeak"></el-option><el-option label="黑名单" value="blackList"></el-option><el-option label="留言" value="voicemail"></el-option></el-select></el-form-item><br/><el-form-item label="通话类型"><el-select v-model="formInline.type" size="small" clearable><el-option label="外呼通话" value="dialout"></el-option><el-option label="普通来电" value="normal"></el-option><el-option label="呼入转接" value="transfer"></el-option><el-option label="外呼转接" value="dialTransfer"></el-option></el-select></el-form-item><el-form-item label="创建时间"><el-date-pickerv-model="date"@change="setDate"size="small"type="daterange"value-format='yyyy-MM-dd'range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit" size="small">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="downExcel" size="small">导出</el-button></el-form-item><el-form-item><el-button type="primary" @click="batch" size="small" :disabled='batchArr.length==0?true:false'>批量下载</el-button></el-form-item></el-form><el-tablesize='small':data="tableData.rows"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="province"width="60" label="省份"></el-table-column><el-table-columnprop="district"width="60" label="城市"></el-table-column><el-table-columnprop="cdrVar"width="100" :formatter='filterCd'label="电话号码"></el-table-column><el-table-columnprop="callType"width="80" :formatter='setCallType'label="通话类型"></el-table-column><el-table-columnprop="state"width="80" :formatter='setState'label="接听状态"></el-table-column><el-table-columnprop="beginTime"width="140" :formatter='setTime'label="通话接听时间"></el-table-column><el-table-columnprop="endTime"width="140":formatter='setTime'label="通话结束时间"></el-table-column><el-table-columnprop="exten"width="70"label="坐席工号"></el-table-column><el-table-columnprop="recordFile"label="录音文件名"></el-table-column><el-table-columnprop="callNo"width="110"label="主叫号码"></el-table-column><el-table-columnprop="calledNo"width="100"label="被叫号码"></el-table-column><el-table-column label="编辑" align="center" width="60"><template slot-scope="scope"><el-button@click.native.prevent="downRow(scope.$index, tableData)"v-if="tableData.rows[scope.$index].state == 'dealing'"type="text"size="small">下载</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage4":page-sizes="[10, 20, 30, 40]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="tableData.total"class="mt20 tr"></el-pagination></el-card></el-col></el-row><!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --></div>
</template><script>
import Vue from 'vue'
import { Form,FormItem,Row,Col,Button ,Loading ,Pagination,Table,TableColumn,Select,Option,Card,Input ,DatePicker} from 'element-ui';const arr = [Form,FormItem,Row,Col,Button ,Pagination,Table,TableColumn,Select,Option,Card,Input,DatePicker]
arr.map((e)=>{  //动态生成全局组件//Vue.use(e);Vue.component(e.name, e)
})
Vue.use(Loading.directive);
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { constants } from 'crypto';export default {name: 'CallList',data() {return {loading:false,selectRows:'',tableData: {rows:[],total:0},currentPage4: 1,date:[],formInline: {phone:'',status:'',startDate:'',type:'',endDate:''},batchArr:[]}},created () {this.getList({...this.formInline})},methods: {setDate(date){this.formInline.startDate = date[0]this.formInline.endDate = date[1]},handleSizeChange(val) {this.selectRows = val //用户控制rowsthis.getList({...this.formInline}) //查询},handleCurrentChange(val) {this.getList({...this.formInline ,page:val}) //用户选择页数},downRow(index,data){ //单个下载let that = thislet oReq = new XMLHttpRequest();        oReq.open("GET", data.rows[index].fileServer+'/'+data.rows[index].recordFile, true);        oReq.responseType = "blob";               oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = data.rows[index].recordFile.split('/')[3].replace('.mp3','-'+data.rows[index].cdrVar.split(':')[1]+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();},handleSelectionChange(val) {this.batchArr = val},batch(){//批量下载//方式一，服务器牛逼，请用这个let that = thisthis.batchArr.map((item)=>{let oReq = new XMLHttpRequest();        oReq.open("GET", item.fileServer+'/'+item.recordFile, true);        oReq.responseType = "blob";             oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = item.recordFile.split('/')[3].replace('.mp3','-'+item.cdrVar.split(':')[1]+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();})//方式二 垃圾服务器，一秒10次，请用这个，哈哈哈哈let that = thislet num = 5 //下载个数let time = 10000 //延迟时间for(let n=0;n<this.batchArr.length/num;n++){setTimeout(()=>{this.batchArr.slice(n*num,(n+1)*num).map((item)=>{let oReq = new XMLHttpRequest();        oReq.open("GET", item.fileServer+'/'+item.recordFile, true);        oReq.responseType = "blob";             oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = item.recordFile.split('/')[3].replace('.mp3','-'+item.cdrVar.split(':')[1]+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();})},time*n)}},onSubmit() {console.log('submit!',this.formInline);this.currentPage4 = 1this.getList({...this.formInline}) //查询},getList(val={}){    let that = thisthis.loading = truelet data = {page:1,rows:that.selectRows?that.selectRows:that.$my.rows,...val}this.$axios.post(that.$my.api + 'callBack/getList', data).then(res => { if(res.data.code === 200){       that.loading = false;that.tableData = res.data.data}else{that.loading = falsethat.$message({message: res.data.message,type: 'error',duration: 1500})return false} }).catch(function (error) {that.loading = false})},downExcel(){let that = thislet oReq = new XMLHttpRequest();        oReq.open("POST", that.$my.api+'callBack/exportRecordData', true);        oReq.responseType = "blob";       oReq.setRequestHeader("Content-Type","application/json");        oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = '回推excel.xls';    elink.style.display = 'none';               var blob = new Blob([content], { type: 'application/vnd.ms-excel'}) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send(JSON.stringify({...this.formInline}));},//过滤setTime(row, column, cellValue, index){return cellValue?this.$my.timestampToTime(cellValue,'YMDHMS'):''},setCallType(row, column, cellValue, index){return cellValue?this.$my.callType[cellValue]:''},filterCd(row, column, cellValue, index){return cellValue?cellValue.split(':')[1]:''},setState(row, column, cellValue, index){return cellValue?this.$my.state[cellValue]:''},},components: {HelloWorld}
}
</script>

2.前端分页版

介绍：为啥给前端分页单独说，因为如果是前端分页，批量下载有bug，下面代码已经解决了

<template>
<!-- 通话记录列表 --><div class="CallRecordList" v-loading="loading"><el-row :gutter="12" class="mt10"><el-col :span="24"><el-card shadow="always" class='ml20 mr20'><el-form :inline="true" :model="formInline" label-width="100px" class="demo-form-inline mt20"><el-form-item label="被叫号码"><el-input v-model="formInline.calledNo" size="small" clearable></el-input></el-form-item><el-form-item label="处理状态"><el-select v-model="formInline.status" size="small" clearable><el-option label="已接" value="dealing"></el-option><el-option label="振铃未接听" value="notDeal"></el-option><el-option label="ivr放弃" value="leak"></el-option><el-option label="排队放弃" value="queueLeak"></el-option><el-option label="黑名单" value="blackList"></el-option><el-option label="留言" value="voicemail"></el-option></el-select></el-form-item><br/><el-form-item label="呼叫类型"><el-select v-model="formInline.connectType" size="small" clearable><el-option label="外呼通话" value="dialout"></el-option><el-option label="普通来电" value="normal"></el-option><el-option label="呼入转接" value="transfer"></el-option><el-option label="外呼转接" value="dialTransfer"></el-option></el-select></el-form-item><el-form-item label="创建时间"><el-date-pickerv-model="date"@change="setDate"size="small"type="daterange"value-format='yyyy-MM-dd'range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit" size="small">查询</el-button></el-form-item><!-- <el-form-item><el-button type="primary" @click="downExcel" size="small">导出</el-button></el-form-item> --><el-form-item><el-button type="primary" @click="batch" size="small" :disabled='batchArr.length==0?true:false'>批量下载</el-button></el-form-item></el-form><el-tablesize='small':data="tableDatas"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="province"width="60" label="省份"></el-table-column><el-table-columnprop="district"width="60" label="城市"></el-table-column><el-table-columnprop="connect_TYPE"width="80" :formatter='setCallType'label="呼叫类型"></el-table-column><el-table-columnprop="status"width="80" :formatter='setState'label="处理状态"></el-table-column><el-table-columnprop="begin_TIME"width="140" label="通话接听时间"></el-table-column><el-table-columnprop="end_TIME"width="140"label="通话结束时间"></el-table-column><el-table-columnprop="exten"width="70"label="坐席工号"></el-table-column><el-table-columnprop="record_FILE_NAME"label="录音文件名"></el-table-column><el-table-columnprop="call_NO"width="110"label="主叫号码"></el-table-column><el-table-columnprop="called_NO"width="100"label="被叫号码"></el-table-column><el-table-column label="编辑" align="center" width="150"><template slot-scope="scope"><el-button@click.native.prevent="downRow(scope.$index, tableData)"v-if="tableData[scope.$index].status == 'dealing'"type="text"size="small">下载</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage4":page-sizes="[10, 20, 30, 40]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"class="mt20 tr"></el-pagination></el-card></el-col></el-row><!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --></div>
</template><script>
import Vue from 'vue'
import { Form,FormItem,Row,Col,Button ,Loading ,Pagination,Table,TableColumn,Select,Option,Card,Input ,DatePicker} from 'element-ui';const arr = [Form,FormItem,Row,Col,Button ,Pagination,Table,TableColumn,Select,Option,Card,Input,DatePicker]
arr.map((e)=>{  //动态生成全局组件//Vue.use(e);Vue.component(e.name, e)
})
Vue.use(Loading.directive);
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { constants } from 'crypto';export default {name: 'CallRecordList',data() {return {loading:false,selectRows:10, //行数tableData: [], currentPage4: 1,/页数date:[new Date(),new Date()],formInline: {calledNo:'',connectType:'',status:'',beginDate:'',endDate:''},batchArr:[] //批量下载数据}},created () {this.formInline = {beginDate: new Date(),endDate: new Date()}},computed: {//重要，解决批量打印无法选中表格tableDatas(){ return this.tableData.slice((this.currentPage4-1)*this.selectRows,this.currentPage4*this.selectRows)}},mounted () {this.getList({...this.formInline})},methods: {setDate(date){ //处理日期this.formInline.beginDate = date[0]this.formInline.endDate = date[1]},handleSizeChange(val) {this.selectRows = val //用户控制rows},handleCurrentChange(val) {this.currentPage4 = val},onSubmit() { //查询console.log('submit!',this.formInline);this.currentPage4 = 1this.getList({...this.formInline}) //查询},getList(val={}){    let that = thisthis.loading = truelet data = {// page:1,// rows:that.selectRows?that.selectRows:that.$my.rows,...val}this.$axios.post(that.$my.api + 'callBack/getRecordList', data).then(res => { if(res.data.code === 200){       that.loading = false;console.log(res.data.data)that.tableData = res.data.data}else{that.loading = falsethat.$message({message: res.data.message,type: 'error',duration: 1500})return false} }).catch(function (error) {that.loading = false})},downExcel(){ //导出-未使用let that = thislet oReq = new XMLHttpRequest();        oReq.open("POST", that.$my.api+'greenCard/exportGreenData', true);        oReq.responseType = "blob";       oReq.setRequestHeader("Content-Type","application/json");        oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = '普通版excel.xls';    elink.style.display = 'none';               var blob = new Blob([content], { type: 'application/vnd.ms-excel'}) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send(JSON.stringify({...this.formInline}));},downRow(index,data){  //单个下载let that = thislet oReq = new XMLHttpRequest();        oReq.open("GET", data[index].file_SERVER+'/'+data[index].record_FILE_NAME, true);        oReq.responseType = "blob";             oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = data[index].record_FILE_NAME.split('/')[3].replace('.mp3','-'+ data[index].called_NO+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();},handleSelectionChange(val) { //前端分页，此处给batchArr赋值会出发两次，第二次为[]，改为计算属性写分页就好了console.log(val)this.batchArr = val},batch(){//批量下载//方式一，服务器牛逼，请用这个let that = thisthis.batchArr.map((item)=>{let oReq = new XMLHttpRequest();        oReq.open("GET", item.file_SERVER+'/'+item.record_FILE_NAME, true);        oReq.responseType = "blob";             oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = item.record_FILE_NAME.split('/')[3].replace('.mp3','-'+item.called_NO+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();})//方式二 垃圾服务器，一秒最多请求10次，请用这个，哈哈哈哈let that = thislet num = 5 //下载个数let time = 10000 //延迟时间for(let n=0;n<this.batchArr.length/num;n++){setTimeout(()=>{this.batchArr.slice(n*num,(n+1)*num).map((item)=>{let oReq = new XMLHttpRequest();        oReq.open("GET", item.file_SERVER+'/'+item.record_FILE_NAME, true);        oReq.responseType = "blob";             oReq.onload = function (oEvent) {            var content = oReq.response;            var elink = document.createElement('a');            elink.download = item.record_FILE_NAME.split('/')[3].replace('.mp3','-'+item.called_NO+'.mp3');    elink.style.display = 'none';               var blob = new Blob([content]) elink.href = URL.createObjectURL(blob);            document.body.appendChild(elink);            elink.click();            document.body.removeChild(elink);        };       oReq.send();})},time*n)}},//过滤setCallType(row, column, cellValue, index){return cellValue?this.$my.callType[cellValue]:''},filterCd(row, column, cellValue, index){return cellValue?cellValue.split(':')[1]:''},setState(row, column, cellValue, index){return cellValue?this.$my.state[cellValue]:''},},components: {HelloWorld}
}
</script>

vue+element 下载or批量下载.mp3文件相关推荐

批量修改mp3文件的title等
批量修改mp3文件的title等不是改文件名哦: 下载地址:https://mp3tag.en.softonic.com/ 帮助文档:file:///C:/Program%20Files%20(x8 ...
android源码下载方法批量下载基于windows os
安装win版的Gitbash, 在这里 http://msysgit.googlecode.com/files/Git-1.6.0.2-preview20080923.exe. 选择默认安装路径(否则 ...
手机下载神器批量下载图片教程
手机版IDM下载神器批量下载图片漫画实际操作教程,现在介绍两个批量下载图片的方法视频教程: 手机IDM下载器批量下载图片漫画实际操作首先,打开你要下载图片的网页,同时打开手机版idm下载器和手机记 ...
GUI 界面的免费音乐下载支持批量下载
GUI 界面的免费音乐下载支持批量下载导包 import urllib import requests import wx import urllib import requests import ...
python 爬取菜鸟教程python100题，百度贴吧图片反爬虫下载，批量下载
每天一点点,记录学习 python 爬取菜鸟教程python100题近期爬虫项目,看完请点赞哦: 1:python 爬取菜鸟教程python100题,百度贴吧图片反爬虫下载,批量下载 2:pytho ...
使用Flickr下载器批量下载Flickr的相册
相信用过Flickr下载图片的人都知道从Flickr上下载原图的操作有点小麻烦.楼主花了许久时间在网上寻找批量下载工具,一直没找到合适的.于是就自己动手写了个Win10应用:Flickr下载器,功能是 ...
Earthdata（NASA）网站数据使用IDM（Internet Download Manager）下载器批量下载方法（MERRA-2为例）
最近给亲近的人写了教程,想着也给大家分享一下. MERRA-2 网址: GES DISC 这个网址是下载MERRA-2 instM_3d_asm_Np类型的数据文件,具体各部分字母代表什么,看下载列表 ...
Vue已知文件地址完成图片视频单个下载及批量下载
<el-button @click="downloadFile(scope.row)" >下载</el-button> 由于是在表格中触发,所以点击下载按 ...
vue里面调后台接口后用a标签单个下载和批量下载
一.单个下载先上效果图: 先上network请求: 主要js代码如下: let baseURl = this.$store.getters.getAllServer;let link = docu ...
osm数据下载 python_批量下载osm的分区域的osm文件
# coding: utf-8 #!/usr/bin/python # #### http://www.openstreetmap.org 的分区后的osm数据批量下载工具(需要python的requ ...

vue+element 下载or批量下载.mp3文件

1.后台分页版

2.前端分页版

vue+element 下载or批量下载.mp3文件相关推荐

最新文章

热门文章