IE浏览器下载文件中文文件名乱码问题解决

admin 管理员组

文章数量: 887018

在web开发工作当中，浏览器兼容性问题总是会引来一大波前端攻城狮们的疯狂吐槽，尤其是IE浏览器更是一个神一般的存在，总是让人头疼不已。
前段时间用java在做一个文件上传下载功能时，发现部分IE浏览器上下载中文文件名文件时会出现文件名乱码的现象。经过查看之前调用的两个文件下载工具类源代码发现其中一个工具类原来代码是直接使用ISO8859-1编码对文件名进行编码，而另一个工具类则多了一层筛选，通过对浏览器请求头中的User-Agent参数中是否存在MISE关键字对进行了判断，当用户使用浏览器是IE时使用URLEncoder.encode(name,”UTF-8”)函数对文件名进行了编码，主要代码如下：

//第一个工具类中的下载方法：
    /**
     * 下载
     * @param request
     * @param response
     * @param fileName
     * @param downLoadPath
     * @param contentType
     * @throws IOException 
     * @throws Exception
     */
    public static void download(HttpServletRequest request,HttpServletResponse response,String fileName,String downLoadPath,String contentType) throws IOException{
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;    
        long fileLength = new File(downLoadPath).length();

        response.setContentType(contentType);
        response.setHeader("Content-disposition", "attachment; filename=" + new String(fileName.getBytes("utf-8"), "ISO8859-1"));
        response.setHeader("Content-Length", String.valueOf(fileLength));

        bis = new BufferedInputStream(new FileInputStream(downLoadPath));
        bos = new BufferedOutputStream(response.getOutputStream());
        byte[] buff = new byte[2048];
        int bytesRead;
        while(-1 != (bytesRead = bis.read(buff, 0, buff.length))){
            bos.write(buff, 0, bytesRead);
        }
        bis.close();
        bos.close();
    }


//第二个工具类中的主要关键代码：
    String filename = null;
    if(request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0){
        filename = URLEncoder.encode(name, "UTF-8");
    }else{
        filename = new String(name.getBytes(),"ISO8859-1");
    }
    response.setHeader("Content-Disposition", "attachment;filename=" + filename);

为了知道这样子到底会有什么问题，是不是只有IE会出现问题，其他浏览器会不会有其他的问题。抱着这些疑问，我找来了目前市面上用户量较多的几款主流的浏览器进行测试，包括：两个不同版本的IE11，Chrome，FireFox，Opera，360浏览器，搜狗浏览器等。经过我对下载的文件的各种文件名称使劲地折腾主要发现以下几个问题：
1.两个IE11在使用第一个方法下载文件时中文文件名都会乱码，而使用第二个方法下载时其中一个IE11中文不会乱码，另一个IE11则会乱码；
2.文件名中存在空格时两个IE11浏览器下载下来文件文件名空格会变成+号，其他浏览器没有这个问题；
3.火狐浏览器下载时遇到文件名中有空格时下载下来的文件的文件名第一个空格后面的文字都会丢失。
经过一番折腾发现原来我们大国产浏览器还是可以的，没有发现明显的问题；233333。
那么这些问题该如何解决呢？首先第一个问题，显然第一段代码并没有将IE浏览器过滤出来对文件名进行单独编码，而是统一采用ISO8859-1编码，这样如果文件名是英文的IE就不会出现任何问题，中文就会出现乱码，其他语言文字则不清楚，其他几款浏览器则没有任何问题，都能兼容。那第二段代码则首先对Http请求头中User-Agent参数进行了判断，通过MISE字段将IE浏览器过滤出来，对文件名进行单独UTF-8编码，所以中文文件名不会乱码了。那么问题来了，为什么两个IE11浏览器，其中一个中文不乱码，而另一个却乱码呢。经过对程序的单步调试，发现那个中文乱码的IE在进入这个方法后程序并没有跳入对文件名进行utf-8编码的方法，而是进入了else下面的那一行代码。那也就是说两个IE11的User-Agent参数中，其中一个有MISE关键字，而另一个则没有。通过查阅资料，原来微软在IE11之后在浏览器的User-Agent参数中去掉了MISE关键字，导致的结果是使用低版本的IE下载中文文件名文件时不会乱码，而采用大部分IE11及以上版本，包括Edge等都会出现中文乱码现象。难怪大家老是说IE很坑呢，IE在这种地方都埋好了坑，等着我们去踩，我也是醉了。
浏览器的User-Agent这个参数主要包含了一些操作系统版本，浏览器版本、内核等信息。
那个下载文件中文会乱码的IE的User-Agent参数如下：
IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko；
显然里面并没有MISE关键字，那么怎么办呢？通过对比几款不同浏览器的User-Agent参数，发现这里面有一个Trident关键字比较特别，是其他浏览器所没有的，那么解决方案来了，我们可以通过Trident关键字来进行对部分IE11的过滤了；
那么针对第二个问题中出现的空格变+号，则是因为URLEncoder函数在对字符串进行转码后将空格替换成了+号，IE就直接把+号显示出来了，解决方法是在对文件名进行转码后，使用replace方法将+号替换为%20即可，浏览器会将%20转换成空格输出。
对于第三个问题则是因为代码在set响应头时Content-Disposition参数的attachment;filename=等号后面文件名字符串没有用双引号括起来，火狐浏览器对于遇到文件名有空格时认为空格前的字符是一个完整的字符串，故下载下来文件时文件名就只剩下空格前的那几个字了。解决方法是在filename两边加上双引号并加反斜杠转义。具体的最终解决这些问题后经过测试兼容性比较好的代码如下：

public static void download(HttpServletRequest request, HttpServletResponse response, String fileName, String downLoadPath, String contenType) throws Exception {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");

        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;

        long fileLength = new File(downLoadPath).length();

        response.setContentType(contenType);

        String header = request.getHeader("User-Agent").toUpperCase();
        if (header.contains("MSIE") || header.contains("TRIDENT") || header.contains("EDGE")) {
            fileName = URLEncoder.encode(fileName, "utf-8");
            fileName = fileName.replace("+", "%20");    //IE下载文件名空格变+号问题
        } else {
            fileName = new String(fileName.getBytes(), "ISO8859-1");
        }

        response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + "\"");
        response.setHeader("Content-Length", String.valueOf(fileLength));

        bis = new BufferedInputStream(new FileInputStream(downLoadPath));
        bos = new BufferedOutputStream(response.getOutputStream());

        byte[] buff = new byte[2048];
        int bytesRead;

        while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
            bos.write(buff, 0, bytesRead);
        }
        bis.close();
        bos.close();
    }

大家如果遇到类似问题，可以参考！☺☺☺

本文标签： 乱码 文件名 中文 浏览器 文件