当前位置: 首页> 房产> 建筑 > js使用网络请求下载文件

js使用网络请求下载文件

时间:2025/7/15 1:28:09来源:https://blog.csdn.net/qq_68155756/article/details/142101449 浏览次数:0次

 以下代码有两个方法:donwloadFileByUrl 和 donwloadFile 传入两个参数,文件地址 和 文件名


import axios from "axios";// 传统a标签下载文件
export const donwloadFile = async (item) => {const a = document.createElement("a");a.style.display = "none";a.setAttribute('target', '_blank');a.download = item.fileName;a.href = item.filePath;document.body.appendChild(a);a.click();document.body.removeChild(a);
};// 网络请求下载文件
export const donwloadFileByUrl = async (item) => {axios.get(item.filePath, {responseType: 'blob' // 拿到文件的blob数据}).then(async (blob) => {console.log(blob);const url = URL.createObjectURL(blob.data);const a = document.createElement('a');a.style.display = 'none';a.setAttribute('target', '_blank');a.href = url;a.download = item.fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}).catch(error => {// 创建一个临时的a标签来触发下载donwloadFile(item)});
};//使用:
donwloadFileByUrl({filePath:'https://xxxxxx/example.pdf',fileName:'example.pdf'})

 推荐用第二个网络请求的方式下载文件,因为第一种方法a标签下载文件(如pdf)的时候会在浏览器打开而不是直接下载文件;并且第二种方法请求错误了会再次尝试执行第一种下载方法(如跨域)

关键字:js使用网络请求下载文件

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: