本文主要是介绍前端下载时,出现err::netERR_FAULT的报错,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
场景:文件下载时,前端通过axios请求后台接口,同时将文件的“半链接”传给该接口,此时后台会重定到文件下载的链接,如果文件过大时,部分浏览器则会出现上述报错,导致无法下载
解决方案:前端通过fetch请求该接口,然后获取到对应的重定向链接,然后通过前端下载即可
注意:在使用fetch请求时,要添加token
下边直接上代码
问题代码:
// 下载全部模板
const downloadModel = async () => {const url = '/common/url'if (url ) {tempDownload(url , '全部模板.zip')} else {ElMessage.warning('模板不存在!')}
}// 前端下载方法
const tempDownload = async (url: string, fileName?: string) => {// 此处的接口,后台会发生重定向,导致部分浏览器在重定向时,产生报错const blob = await downloadPermission({ url })const a = document.createElement('a')a.style.display = 'none'const href = window.URL.createObjectURL(blob)a.href = hrefa.download = fileName ? fileName : 'file'document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);
}
正确代码:
// 下载全部模板
const downloadModel = async () => {const url = '/common/url'const token = '系统token'if (url) {// 通过后台接口,获取可以下载的全链接,并且有权限、时效控制fetch(`/download/files?url=${url}`, {method: 'GET',headers: {"accept": "*/*",'Cache-Control': 'no-cache',"token": token ,}}).then((response) => {if (response.url) {// 前端通过tempDownload方法直接下载即可tempDownload(response.url, '全部模板.zip')} else {ElMessage.warning('模板不存在!')}}).catch(error => console.log('error', error))} else {ElMessage.warning('模板不存在!')}
}// 前端下载方法
const tempDownload = async (url: string, fileName?: string) => {if (!url) return falseconst a = document.createElement('a')a.style.display = 'none'a.href = urla.download = fileName ? fileName : 'file'document.body.appendChild(a)a.click() // 触发点击事件以启动下载document.body.removeChild(a)
}
这篇关于前端下载时,出现err::netERR_FAULT的报错的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!