admin管理员组文章数量:1558052
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)
}
})
};
到此完美解决
本文标签: 文件
版权声明:本文标题:文件下载踩的坑 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727374234a1111518.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论