由于项目兼容性问题,需要在IE浏览器中使用(真的是醉了),经过很久的摸索,终于完成了IE浏览器中的点击按钮下载文件的功能。查了很多资料发现网上的基本上都是有问题的,特地总结下。
注意:ie9是不支持Blob下载的,也就是我这里的方法不支持Ie9,只支持IE10-11,对浏览器类型也做了判断
- 前端
layui
后端go
直接上代码:
html文件
<button class="layui-btn" value={{$elem.photo_url}} style="font-size: 28px; height:48px;margin: 10px;" test-active="btn-download">下载</button>
js方法
<script src="/layui/layui.js"></script>
<script>
layui.use(function () {
var layer = layui.layer
, form = layui.form
, laypage = layui.laypage
, element = layui.element
, laydate = layui.laydate
, util = layui.util;
function download(src) {
var xhr = new XMLHttpRequest();
//xhr类型得这么设置
xhr.onloadstart = function (ev) {
xhr.responseType = "blob";
}
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
var type = xhr.getResponseHeader('Content-Type');
var blob = new Blob([this.response], { type: type });
if (blob.type == "text/html") {
return false
}
//这里是我自己的业务需求
var _tmp_list = src.split("/");
var fileName
if (_tmp_list.length > 1)
fileName = _tmp_list[_tmp_list.length - 1];
else
fileName = src;
if (window.navigator.msSaveOrOpenBlob) { // IE浏览器下
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}
} else {
}
},
xhr.onerror = function (err) {
console.log(err)
}
xhr.open("get", src, true);
xhr.send()
};
//触发事件
util.event('test-active', {
'btn-download': function (othis) {
//判断是否IE浏览器
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
if (isIE) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
download(othis.context.value)
}
else {
layer.msg('下载功能仅支持ie10及以上浏览器,请右击另存为存储图片');
}
} else {
download(othis.context.value)
}
}
});
});
</script>
- 总结
- ie9,ie10,ie11每个版本的功能都不一样,经常同样的代码换个ie版本就不行了,好在调通了本功能
- win10上的ie11可以通过“右键”->"检查元素"->右侧的按钮可以切换ie版本