js 模拟ajax请求下载文件

最新推荐文章于 2024-06-07 19:59:06 发布

依然 - 范特西

最新推荐文章于 2024-06-07 19:59:06 发布

阅读量354

点赞数

文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/weixin_44402979/article/details/128664358

版权

该文章介绍了一种前端实现文件下载的方法，通过FetchAPI获取服务器文件的二进制数据，利用Blob对象创建文件，然后用a标签触发下载并实现文件的重命名功能。这种方法支持图片、视频和各种文件类型，同时也处理了跨域请求的问题。

摘要由CSDN通过智能技术生成

文章目录

场景

需求要根据服务器文件地址，在前端进行文件下载并重命名，支持图片、视频、文件

实现思路

1、在前端使用 Fetch 获取资源的接口,将文件地址转换完整的二进制数据，然后创建页面元素标签，下载文件

/**
 * 根据文件路径下载文件，并重命名
 * @param filePath 服务器文件路径
 * @param fileName  重命名                                                                                                                                     11111
 */
function downLoadFile(filePath,fileName) {
    // fetch 获取资源的接口（包括跨域请求）
    //response.blob() 返回一个完整的二进制数据
    fetch(filePath).then((response) => response.blob())
        .then((res) =>{
            var blob = new Blob([res])
            var link = document.createElement('a');//创建a标签
            link.href = window.URL.createObjectURL(blob);//获得一个http格式的url路径
            link.download = fileName;//下载文件 并重命名
            link.click();
    })
}