描述问题:
今天测试发现一个问题,就是文件下载在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); }
如此这般就实现了文档在火狐浏览器的下载
小结:
改完了问领导才知道这是别人负责的部分,不需要我修改;
但是我还是记录下来,以后如果再用到就可以直接在自己博客里面找了。
如果大家有什么要提点的地方,洗耳恭听哦。