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>
  • 相关阅读:
    另类多线程生产者与消费者模式
    redis.conf配置详细翻译解析
    数据库优化之索引使用简介
    Comparable和Comparator的区别
    spring中用到哪些设计模式
    JVM之几种垃圾收集器简单介绍
    angular.extend()和 angular.copy()的区别
    ThreadLocal是什么?保证线程安全
    excel文件怎么使用php进行处理
    ubuntu 安装ssh 服务
  • 原文地址:https://www.cnblogs.com/q0024/p/14115555.html
Copyright © 2011-2022 走看看