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{width: 70%;}
.btn{margin-top: 5px;}
</style>
