axios 请求 服务器下载excel 文件,文件无法正常打开
2021-01-09 本文已影响0人
编程知识圈
通常前端下载 excel 文件,有两种方式:
1. 后端 生成好excel 文件,把地址传给前端,前端只需把地址放到<a>便签上就可以了,然后用户点击<a>便签进行文档下载。
2. 后端传输给前端的是一个二进制流数据,前端需要把这个二进制流数据创建成 blob 对象,然后再为这个 blob对象创建一个URL 地址,把创建好的 URL 地址 挂载到 <a> 标签的 href 上。
对上面的2种方式的直接理解是:第一种是由后端生成 excel文件;第二种是由前端生成 excel 文件。
第2种方式: 由前端生成 excel 文件:
需要开发中需要注意的点:
1. 需要用到 new Blob()
2. 需要用到 URL.createObjectURL(blob)
3. 动态创建 <a> 标签
4. 注意设置请求头中 response 的类型 { responseType: 'arraybuffer'},对指定类型进行设置,否则会导致下载的文件无法正常打开。
以下是实现代码:
创建并下载excel文件 axios请求