项目中使用vue，在下载excel文件的时候，遇到了乱码问题，困扰了好久，查了网上的很多资料都没用，后来查阅了一篇博客，解决了问题。后端是流的形式返回的。

我尝试把返回类型（responseType: 'blob'）写在接口调用的地方，发现还是乱码。

后来把返回类型（responseType: 'blob'）写在接口定义的地方就好了，如图1



图1



图2

下载.csv文件，excel打开乱码
功能：下载csv文件，并查看

环境：前端axios请求，后端java语言
遇到的问题：下载后的文件用office excel打开乱码，wps及其他正常
后端解决方式： 将编码改为gbk编码
前端解决方式： 就很麻烦了，如下

第一步：将blob格式的type改为’text/csv’，再进行下载

如果不做这一步，进行导入csv的话，excel会出现如图错误



原因应该是和换行符有关系，可查看文章：excel导入csv数据出错：此文本文件包含的数据无法放置在一个工作表中。。。
所以我认为这一步解决的是换行符的问题

第二步：

1、打开excel

2、点击数据里的从文本



3、改变编码格式为utf-8，点击下一步



4、设置分隔符



5、点击完成


我认为这一步改变的应该是文件的编码格式

当然最终这个问题用后端的解决方式才是正道，哈哈

须将axios 配置中的responseType设置为arraybuffer，这样就不会让表格出现乱码现象；
如果要动态设置文件名则需要让后台将名字设置到响应头中，否则将是一个乱码的文件名；
然后通过 标签的特性来自动点击下载文件；
如果要兼容IE则需要利用navigator.msSaveOrOpenBlob方法；
兼容Firefox 须将 标签添加到body中，最后再移除 标签

例子：
// axios config
 config = {
     responseType: 'arraybuffer'
    }

// 返回数据处理
getUserInfoExport(data).then(({data,headers}) => {
        let blob = new Blob([data], { type: 'application/vnd.ms-excel' }) // 将服务端返回的文件流（二进制）excel文件转化为blob
        let fileName = headers.filename

        if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
          window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
          let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob)
          let downFile = document.createElement('a')
          downFile.style.display = 'none'
          downFile.href = objectUrl
          downFile.download = fileName // 下载后文件名
          document.body.appendChild(downFile)
          downFile.click()
          document.body.removeChild(downFile) // 下载完成移除元素
          // window.location.href = objectUrl
          window.URL.revokeObjectURL(objectUrl)   // 只要映射存在，Blob就不能进行垃圾回收，因此一旦不再需要引用，就必须小心撤销URL，释放掉blob对象。
        }
      })

问题：java中用poi API进行Excel文件的下载，下载操作可以执行，可是最后发现下载的文件名称若为中文，则会出现乱码。

 

解决办法：

原因：ie浏览器下自动转码格式为gbk，而火狐、chrome等浏览器下的自动转码格式为utf-8

因而，在生成下载文件名时，只需根据不同的浏览器，对文件名进行转码即可。

直接上代码：

这里只贴生成文件名的代码：

/**
     * 下载文件输出流 文件头设置
     * @param response 服务器响应
     * @param request 客户端请求
     * @param contentType 头信息
     * @param exportDto 下载实体信息
     * @return
     * @throws Exception
     */
    private static OutputStream getWriteOutputStream(HttpServletResponse response, HttpServletRequest request) throws Exception {

        response.reset();// 清空输出流
        response.setContentType("application/ms-excel;charset=utf-8");

       
        String fileName = encodeFileName("这里是你的文件名", request);

        // attachment这个代表要下载的，如果去掉就直接打开了(attachment-作为附件下载,inline-在线打开)
        // filename是文件名，另存为或者下载时，为默认的文件名
        response.addHeader("Content-Disposition", "attachment; filename="+fileName);// IE下GBK，但是FireFox下UTF-8
        return response.getOutputStream();
    }

 /**
     * @param   fileNames
     * @param   request
     * @Description: 导出文件转换文件名称编码
     */
    public static String encodeFileName(String fileNames, HttpServletRequest request) {
        String codedFilename = null;
        try {
            String agent = request.getHeader("USER-AGENT");
            if (null != agent && -1 != agent.indexOf("MSIE") || null != agent && -1 != agent.indexOf("Trident") || null != agent && -1 != agent.indexOf("Edge")) {// ie浏览器及Edge浏览器
                String name = java.net.URLEncoder.encode(fileNames, "UTF-8");
                codedFilename = name;
            } else if (null != agent && -1 != agent.indexOf("Mozilla")) {
                // 火狐,Chrome等浏览器
                codedFilename = new String(fileNames.getBytes("UTF-8"), "iso-8859-1");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return codedFilename;
    }