2021-10-28

vue文件下载，后台二进制数据流

<template>
<div class="body">
    <van-row class="top">
        <van-col span="4" @click="back">
            <van-icon name="arrow-left" />
        </van-col>
        <van-col span="10" class="search2" offset="2">
            <p>文件信息查询</p>
        </van-col>
        <van-col span="2" @click="download" class="search2" offset="6">
            <img src="../assets/xz (2).png" alt="">
        </van-col>
    </van-row>
    <div @click="select(item.filename,$event)" v-for="(item,index) in this.$store.state.search" :key="index" class="center">
        <ul>
            <li>
                <span>任务编号：</span>
                <span class="se">{{item.jobTaskID}}</span>
            </li>
            <li>
                <span>文件类型：</span>
                <span class="se">{{item.extension}}</span>
            </li>
            <li>
                <span>文件名：</span>
                <span class="se">{{item.filename}}</span>
            </li>
            <li>
                <span>文件大小</span>
                <span class="se">{{item.size}}字节</span>
            </li>
        </ul>
    </div>
</div>
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
export default {
    data(){
        return {
            se: 1,
            id: this.$route.params.id,
            select_arr: []
        }
    },
    mounted(){
        document.getElementsByClassName('body')[0].style.minHeight = window.screen.availHeight+'px'
    },
    methods: {
        back(){
            this.$router.go(-1)
        },
        select(item,e){
            if($(e.currentTarget).hasClass('bgc')){
                $(e.currentTarget).removeClass('bgc')
                for(var index in this.select_arr){
                    if(this.select_arr[index] == item){
                        this.select_arr.splice(index,1)
                    }
                }
            }else{
                $(e.currentTarget).addClass('bgc')
                this.select_arr.push(item)
            }
        },
        download(){
            if(this.select_arr.length == 0){
                this.$toast('请先选择文件下载')
            }else{
                axios({
                    url: 'logfile/download',
                    method: 'POST',
                    data: {
                        files: this.select_arr
                    }
                }).then(res => {
                    this.downloadFileByBase64('data:application/zip;base64,'+res.data.data)
                })
            }
        },
        dataURLtoBlob(dataurl){//二进制数据流截取下载
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        downloadFileByBase64(base64,name){
            var myBlob = this.dataURLtoBlob(base64)
            var myUrl = URL.createObjectURL(myBlob)
            this.downloadFile(myUrl,name)
        },
        downloadFile(url,name='文件'){//下载事件
            var a = document.createElement("a")
            a.setAttribute("href",url)
            a.setAttribute("download",name)
            a.setAttribute("target","_blank")
            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);  
            a.dispatchEvent(clickEvent);
        }
    }
}
</script>
<style lang="scss" scoped>
.body{
    width: 100%;
    min-height: 56rem;
    background-color: #001526;
}
.top{
    padding-top: 1rem;
    padding-bottom: 1rem;
    .colse{
        padding-left: 1rem;
        font-size: 1.5rem;
    }
    .search2{
        text-align: center;
    }
}
.bgc{
    background-image: url('../assets/mbz5.png');
}
.center{
    width: 96%;
    margin: 0 auto;
    background-size: 100% 100%;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    background-color: #102E46;
    .center1{
        display: flex;
    }
    span{
        font-size: 1rem;
    }
    .ctop{
        width: 96%;
        height: 3rem;
        margin: 0 auto;
        text-align: center;
        margin-top: 1rem;
        .xian{
            width: 120px;
            height: 1px;
            background: linear-gradient(270deg, #0E2E45 0%, #526576 19%, #586B7C 70%, rgba(14, 46, 69, 0.51) 100%);
            opacity: 1;
            margin-left: 2rem;
            margin-top: 1rem;
        }
    }
    ul{
        width: 80%;
        margin: 0 auto;
        line-height: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .se{
        color: #26EFF3;
    }
}
</style>