Vue -- 视频&&下载 组件

<template>
  <div class="home">
      <Card :bordered="false">
          <p slot="title">视频</p>
          <video controls preload="auto">
            <source :src="video" type="video/mp4">
          </video>
          <div>
            <Button class="btn" type="error" ghost @click="download">下载</Button>
          </div>    
      </Card>
  </div>

</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      video:`${process.env.BASE_URL}video.mp4`  // 在模板中向组件传入基础URL
    }
  },
  mounted(){
    this.$Loading.error()
  },
  methods:{
    download(){
      var fileUrl = 'http://172.18.124.46:8886/dataExport/downloadSampledata'
      axios({
        method:'get',
        url:fileUrl,
        responseType: 'blob'  // 二进制流文件
      }).then(res=>{
        const link = document.createElement('a')
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', `${name}.xlsx`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(req=>{console.log('error'+req)})
    }
  }
};
</script>
<style scoped>
.home{background: #eee;padding:20px;text-align: center;}
video{ 70%;}
.btn{margin-top: 5px;}
</style>
原文地址:https://www.cnblogs.com/q0024/p/14115555.html