BUG篇：关于Blob文档下载

您所在的位置：网站首页 › uc浏览器无法下载文件 › BUG篇：关于Blob文档下载

BUG篇：关于Blob文档下载

2024-07-11 19:31| 来源: 网络整理| 查看: 265

描述问题：

今天测试发现一个问题，就是文件下载在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); }

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

小结：

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

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

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

【本文地址】

BUG篇：关于Blob文档下载

BUG篇：关于Blob文档下载

今日新闻

推荐新闻