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

方法一

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);
})

方法二

export function exportRecord(params){
    return axios.post("/api","inWareHou/exportRecord",params,{responseType: 'blob'})
}
exportRecord().then(res=>{
        //创建一个隐藏的a连接，
    const link = document.createElement('a');
    
    //根据客户需求选择excel后缀格式  以下二选一
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});   //lsx
    let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});   //xlsx
    
    link.style.display = 'none';
    //设置连接
    link.href = URL.createObjectURL(blob);
    link.download = '自定义文件名'; 
    document.body.appendChild(link);
    //模拟点击事件
    link.click();
})