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);
      }

 

 

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

 BUG篇:关于Blob文档下载----浏览器兼容性问题_第1张图片

  • 不太理解上面给出的解决方案是什么意思,然后就去找找 火狐浏览器下载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);
        }

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

小结:

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

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

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

 

 

你可能感兴趣的:(BUGS)