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>