zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    第十周课程总结
    第九周课程总结&实验报告(七)
    第八周课程总结&实验报告(六)
    第七周课程总结&实验报告(五)
    第六周&java实验报告四
    第五周课程总结&试验报告(三)
    课程总结
    第十四周课程总结
    第十三周学习总结
    第十二周编程总结
  • 原文地址:https://www.cnblogs.com/q0024/p/14115555.html
Copyright © 2011-2022 走看看