BUG篇：关于Blob文档下载----浏览器兼容性问题

描述问题：

今天测试发现一个问题，就是文件下载在chrome浏览器中正常，但是在火狐浏览器中不正常，代码中也没有对浏览器进行限制，那是什么导致了这个问题呢？

解决过程：

点击 导出 按钮，此时火狐浏览器报错如下：

• 

 

• 重新一步步找到报错的代码

• // Blob文件转换下载
    downFile(result, fileName, fileType?) {
      let data = result.body;
      let blob = new Blob([data], {type: fileType || data.type});
      let objectUrl = URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.setAttribute('style', 'display:none');
      a.setAttribute('href', objectUrl);
      a.setAttribute('download', fileName);
    
      a.click();
      URL.revokeObjectURL(objectUrl);
    }

 

 

• 然后 点击报错部分 详细了解，找解决方案：

 

• 不太理解上面给出的解决方案是什么意思，然后就去找找 火狐浏览器下载Blob文件：
  • 对二进制流实现Blob下载 找到这个链接，里面很清楚，因为自己的代码里面也是获取到了返回数据的，只是下载的时候没有成功实现下载，就看了此文档中文档保存部分，代码摘出如下：

  • saveFile({
          payload: {blob, fileName = 'abcdefg.xls'},
        }, { call }) {
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, fileName);
            } else {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
     
                //此写法兼容可火狐浏览器
                document.body.appendChild(link);
     
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", false, false);
                link.dispatchEvent(evt);
     
                document.body.removeChild(link);
            }
        }

    自己的代码就改造一下吧

  • // Blob文件转换下载
      downFile(result, fileName, fileType?) {
        let data = result.body;
        let blob = new Blob([data], {type: fileType || data.type});
        let objectUrl = URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.setAttribute('style', 'display:none');
        a.setAttribute('href', objectUrl);
        a.setAttribute('download', fileName);
        // 此写法兼容可火狐浏览器
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(objectUrl);
        document.body.removeChild(a);
      }

    如此这般就实现了文档在火狐浏览器的下载

小结：

改完了问领导才知道这是别人负责的部分，不需要我修改；

但是我还是记录下来，以后如果再用到就可以直接在自己博客里面找了。

如果大家有什么要提点的地方，洗耳恭听哦。