通过a标签下载二进制流文件，下载文件中文乱码、下载xlsx文件所有列都在一列问题

小玲子小玲子

已于 2024-04-03 11:08:35 修改

阅读量3.4k

点赞数

文章标签： javascript 文件下载

于 2021-04-17 22:41:01 首次发布

本文链接：https://blog.csdn.net/lingliu0824/article/details/115721541

版权

1.后端传入二进制文件流，通过创建a标签的方法下载文件：

const url = window.URL.createObjectURL(new Blob([res]));
var a = document.createElement("a");
a.download = "文件名.xls";
a.href = url
$("body").append(a); 
a.click();
$(a).remove()
URL.revokeObjectURL(url)

问题：下载后的文件出现乱码
后端返回数据：
在这里插入图片描述
下载后出现中文乱码。

2.下载xlsx文件时，后端返回的列都显示在同一列中

在这里插入图片描述
下载文件：

解决：设置请求responseType为blob

Axios.get(baseURL + '/system/userinfo/exportTemplate', { responseType: 'blob' })

3.从响应头种获取文件名称

后端可以把文件的名称放在响应头中。
在这里插入图片描述

处理：

const getFileNameByResponseHeaders = headers => {
  const cd = headers['content-disposition']
  if (cd && _.isString(cd)) {
    const cdArr = cd.split('=')
    if (cdArr && _.isArray(cdArr)) {
      return decodeURI(cdArr[1])
    }
  }
  return null
}