前端接收Excel文件

259 阅读1分钟

背景

后端返回了excel文件给前端,但是以二进制格式返回,无法直接获取

image.png

解决策略

const exportData = () => {  
    return $axios({  
    url: `/area/export`,  
    method: 'get',  
    responseType: "blob"  
    })  
}
  exportData().then(res => {
                
    const blob = new Blob([res]);  // 把得到的结果用流对象转一下
    var a = document.createElement("a"); //创建一个<a></a>标签
    a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
    a.download = "区域城市统计.xlsx"; //设置文件名
    a.style.display = "none";  // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
    a.remove(); // 一次性的,用完就删除a标签

    }
);

加入后成功导出excel格式文件

image.png