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-picker
                v-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-table
            size='small'
            :data="tableData.rows"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="province"
              width="60" 
              label="省份">
            </el-table-column>
            <el-table-column
              prop="district"
              width="60" 
              label="城市">
            </el-table-column>
            <el-table-column
              prop="cdrVar"
              width="100" 
              :formatter='filterCd'
              label="電話號碼">
            </el-table-column>
            <el-table-column
              prop="callType"
              width="80" 
              :formatter='setCallType'
              label="通話類型">
            </el-table-column>
            <el-table-column
              prop="state"
              width="80" 
              :formatter='setState'
              label="接聽狀態">
            </el-table-column>
            <el-table-column
              prop="beginTime"
              width="140" 
              :formatter='setTime'
              label="通話接聽時間">
            </el-table-column>
            <el-table-column
              prop="endTime"
              width="140"
              :formatter='setTime'
              label="通話結束時間">
            </el-table-column>
            <el-table-column
              prop="exten"
              width="70"
              label="坐席工號">
            </el-table-column>
            <el-table-column
              prop="recordFile"
              label="錄音文件名">
            </el-table-column>
            <el-table-column
              prop="callNo"
              width="110"
              label="主叫號碼">
            </el-table-column>
            <el-table-column
              prop="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 //用戶控制rows
      this.getList({...this.formInline}) //查詢
    },
    handleCurrentChange(val) {
      this.getList({...this.formInline ,page:val}) //用戶選擇頁數
    },
    downRow(index,data){ //單個下載
        let that = this
        let 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 = this
      this.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 = this
      let 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 = 1
        this.getList({...this.formInline}) //查詢
      },
    getList(val={}){    
        let that = this
        this.loading = true
        let 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 = false
                that.$message({
                    message: res.data.message,
                    type: 'error',
                    duration: 1500
                })
                return false
            } 
        }).catch(function (error) {
          that.loading = false
        })
      },
      downExcel(){
        let that = this
        let 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-picker
                v-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-table
            size='small'
            :data="tableDatas"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="province"
              width="60" 
              label="省份">
            </el-table-column>
            <el-table-column
              prop="district"
              width="60" 
              label="城市">
            </el-table-column>
            <el-table-column
              prop="connect_TYPE"
              width="80" 
              :formatter='setCallType'
              label="呼叫類型">
            </el-table-column>
            <el-table-column
              prop="status"
              width="80" 
              :formatter='setState'
              label="處理狀態">
            </el-table-column>
            <el-table-column
              prop="begin_TIME"
              width="140" 
              label="通話接聽時間">
            </el-table-column>
            <el-table-column
              prop="end_TIME"
              width="140"
              label="通話結束時間">
            </el-table-column>
            <el-table-column
              prop="exten"
              width="70"
              label="坐席工號">
            </el-table-column>
            <el-table-column
              prop="record_FILE_NAME"
              label="錄音文件名">
            </el-table-column>
            <el-table-column
              prop="call_NO"
              width="110"
              label="主叫號碼">
            </el-table-column>
            <el-table-column
              prop="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 = 1
        this.getList({...this.formInline}) //查詢
      },
    getList(val={}){    
        let that = this
        this.loading = true
        let 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 = false
                that.$message({
                    message: res.data.message,
                    type: 'error',
                    duration: 1500
                })
                return false
            } 
        }).catch(function (error) {
          that.loading = false
        })
      },
      downExcel(){ //導出-未使用
        let that = this
        let 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 = this
        let 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 = this
      this.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 = this
      let 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>