首页 > 其他 > 详细

Vue -- 视频&&下载 组件

时间:2020-12-10 17:42:22      阅读:74      评论:0      收藏:0      [点我收藏+]
<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>

Vue -- 视频&&下载 组件

原文:https://www.cnblogs.com/q0024/p/14115555.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!