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请求
上一篇下一篇

猜你喜欢

热点阅读