vue 后台返回文件流 前端导出excel

 文件导出有多种方式，不同的前后台框架使用的方法也不尽相同。笔者公司一般采用两种方式：一是后台在服务器上生成一个文件，然后提供一个连接给前台下载；二是后台返回文件流，前端自己封装方法进行下载。

下面介绍vue中使用前台接收文件流，导出excel文件的方法

首先后台返回文件流：

 前端vue中使用blob来操作：

this.$http({
    url: '/pod/vehicle/alarmEvent/exportGet',
    method: 'get',
    responseType: 'blob', // 表明返回服务器返回的数据类型
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
        //接口参数
    }
}).then((res)=>{
    //创建一个隐藏的a连接，
    const link = document.createElement('a');
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
    link.style.display = 'none';
    //设置连接
    link.href = URL.createObjectURL(blob);
    link.download = '自定义文件名'; 
    document.body.appendChild(link);
    //模拟点击事件
    link.click();
}).catch((err)=>{
    console.log(err);
})