IE浏览器按钮下载文件

79 阅读1分钟

由于项目兼容性问题,需要在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版本