文件下载踩的坑

1、背景介绍

有个系统，要做一个操作文档下载，但是这个项目的代码什么的都找不到，只能写个jsp扔到服务器上，然后就确定了下载文件的思路，在服务器上建一个文件夹，把文件放进去，写一个a标签，直接链接到这个文件，这样就实现了下载功能。

2、踩的坑

        1、a标签下载文件，ie浏览器会将文件打开，是以2进制的格式在页面打开，显示一堆乱码

        解决办法：服务器是resin，找配置文件，添加mime类型

        2、在没找到配置文件的时候，想过用流处理实现，但是流处理会报错illegal utf8 encoding at (184)，所以又回去用a标签实现，找配置文件

        解决办法：最后发现添加上response.setCharacterEncoding("ISO-8859-1");就好了

        3、用a标签下载文件发布之后，发现谷歌浏览器不会下载mp4，而是直接播放

        解决办法：给a标签设置download属性

        4、文件列表乱码

        解决办法：发现正式环境是GBK编码，GBK转UTF-8编码

        5、发现GBK转UTF-8还是会乱码

        解决办法：无解！因为GBK用两个字节表示汉字，UTF-8用3个字节表示汉字。所以出现下面的情况

        例：偶数汉字，没问题 你好(a b c | d e f) --->转GBK--->乱码（a b | c d | e f）-->转UTF-8-->你好(a b c | d e f)

               奇数汉字，有问题 你(a b c) --->转GBK--->非法文字（a b | c）-->转UTF-8-->非法文字

        那怎么办呢？让功能顾问将文件改成偶数个汉字0.0

        6、download属性ie无效

        解决办法：直接在js里搞，用navigator.msSaveBlob()方法

        7、用navigator.msSaveBlob(blob,文件名)就得创建一个blob

        8、创建blob就需要下载文件，然后组装成blob，正常下载的文件组装成blob会导致文件打不开

        9、只有设置一个responseType: 'blob'的参数

        10、设置这个参数，就得用axios请求

        11、axios用到了es6，需要ie支持es6语法，需要引入polyfill.min.js、babel.min.js、axios.min.js，并且script的type写成"text/babel"。

        12、其中还遇到一个小坑，jQuery的$(this).attr('属性')区不到值，需要用 方法.call(this)这种写法。下面贴代码：

html：

<img src=\""+imagePath+"\"
     class=\"img-td\"
     fileName=\""+new String(str.getName().getBytes("GBK"),"UTF-8")+"\"
     downloadName=\""+str.getName()+"\"
     onclick=\"downloadFile.call(this)\">

js：

        function downloadFile(){
            var basePath = '/manualFile/';
            var fileName = $(this).attr('fileName');
            var downloadName = $(this).attr('downloadName');
            axios({
                method: 'get',
                url: basePath+downloadName,
                responseType: 'blob'
            }).then(res => {
                const blob = new Blob([res.data], { type: 'application/octet-stream' })
                if ('download' in document.createElement('a')) { // 非IE下载
                    const elink = document.createElement('a')
                    elink.download = fileName
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 释放URL 对象
                    document.body.removeChild(elink)
                } else { // IE10+下载
                    navigator.msSaveBlob(blob, fileName)
                }
            })
        };

到此完美解决