（二）vue下载模板功能--前端接受后端文件流方式下载

 <Modal v-model="modal3">
            <div style="font-size: 20px">
                <p style="padding-bottom: 20px">确定导出吗？</p>
                <p><span>当前导出数量为：</span><span style="color: #2d8cf0;">{{this.num}}</span></p>
            </div>
            <div slot="footer">
                <Button :disabled="num < 1" type="primary" size="large" @click="ok" >
                    <div class="p-export">确定导出</div>
                </Button>
                <Button  type="text" size="large" :page-size="page_size" @click="modal3 =false">取消</Button>
            </div>
        </Modal>


   ok() {
                let params = {
                    export_flow_id:this.export_flow_id,
                }
                this.$http({
                    method: 'get',
                    responseType: 'blob',//防止返回乱码
                    url: 'url',
                    params: params
                }).then(res=>{
                    console.log(res.data.status)
                    if(res.status == '200'){
                        // downloadFile (data, name)
                        let data = res.data;
                        if (!data) {
                            this.$message.error('下载失败，解析数据为空！')
                            return
                        }
                        const datetime = Date.now();
                        // 创建一个新的url，此url指向新建的Blob对象
                        let url = window.URL.createObjectURL(new Blob([data]))
                        // 创建a标签，并隐藏改a标签
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        // a标签的href属性指定下载链接
                        link.href = url
                        //setAttribute() 方法添加指定的属性，并为其赋指定的值。
                        let fileName = datetime + '.csv';
                        link.setAttribute('download', fileName )
                        document.body.appendChild(link)
                        link.click()
                        this.$Message.info('导出成功');
                        this.modal3 = false;
                    }else{
                        this.$Message.error('导出失败，请尝试重新导出');
                    }
                });
            }

参考链接