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

 
            

                
确定导出吗？
                
当前导出数量为：{{this.num}}
            
            

                
                    
确定导出
                
                取消
            
        


   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('导出失败，请尝试重新导出');
                    }
                });
            }

参考链接