首先在.vue文件里将样式给写好

<a style="margin-left: 55px; cursor: pointer;" @click="popExcel" > <i class="glyphicon glyphicon-download-alt" title="下载"></i> 导出获奖列表信息 </a>

下载的功能后台已经都已经写好的，所以只要展现一下就可以了，

直接写个方法就行了，

`

excel(date){//导出某天获奖列表到excel

            api.getExportAwardExcel(this.date, this.kId)

            .then(res => {

                this.$refs.dialog3.close()

                if (this.kId === null) {//测试环境

                    window.location.href = http://www.mamicode.com/‘https://lab.yoosh.tv/mgmt/export/exportAwardExcel?date=‘ + this.date

                }else{

                    window.location.href = http://www.mamicode.com/‘https://lab.yoosh.tv/mgmt/export/exportAwardExcel?date=‘ + this.date + ‘&kId=‘ + this.kId

                }

                if (res.data.ok) {

                    console.log(res.data)

                }

            }).catch(err => {

                alert(err)

            })

        },

` 很多时候其实是一个很简单的功能，所以就不需要搞得太复杂化，简单点。

文件下载功能的前台页面的展现