js文件url地址下载

js文件url地址下载

前言：开发过程中，后端返回的文件url地址下载后文件名乱码，出于各种原因导致后端实现起来不太方便，于是这个问题就需要前端做处理,以下是两种实现方法做了整理。（亲测有效！！）

方法1：

//方法一：
let downloadFile = (FileUrl)=>{
            const link = document.createElement('a');
            link.href = FileUrl;
            link.setAttribute('download', FileUrl);
            link.click();
        }
//方法二：
let download = (resp, options) => {
    let blob = new Blob([resp.data], {type: options.fileType ? options.fileType : 'application/octet-binary'})
    //创建下载的链接
    let href = window.URL.createObjectURL(blob)
    downloadBlob(href, options.fileName)
}
//方法三：
let downloadBlob = (blobUrl, fileName, revokeObjectURL) => {
    let downloadElement = document.createElement('a')
    downloadElement.href = blobUrl
    //下载后文件名
    downloadElement.download = fileName
    document.body.appendChild(downloadElement)
    //点击下载
    downloadElement.click()
    //下载完成移除元素
    document.body.removeChild(downloadElement)
    if (revokeObjectURL == null || revokeObjectURL) {
        //释放掉blob对象
        window.URL.revokeObjectURL(blobUrl)
    }
}

export default{
	downloadBlob ,
	download ,
	downloadFile,
}

方法2

downFile (url,linkDownload){
        fetch(url)  //使用fetch函数发送一个GET请求到指定的URL，获取文件的响应对象。
            .then(response => response.blob())  //通过.then方法链，将响应对象转换为Blob数据（文件的二进制数据）。
            .then(blob => { //再次使用.then方法链，处理获取到的Blob数据。
                const link = document.createElement('a'); //使用document.createElement创建一个<a>节点。
                link.href = URL.createObjectURL(blob);  //通过URL.createObjectURL方法，将Blob数据转换成URL对象，然后将该URL赋值给link的href属性。这一步相当于生成了一个临时URL，供下载使用。
                link.download = linkDownload; // 替换为你要保存的文件名和扩展名(设置用户下载文件时使用的文件名和扩展名)
                link.click();   //调用click方法模拟用户点击链接，从而触发浏览器的文件下载行为。
 
                URL.revokeObjectURL(link.href); // 释放URL对象资源(使用URL.revokeObjectURL方法释放之前创建的URL对象资源，避免内存泄漏)
            })
            .catch(error => {
                console.error('下载失败:', error);
            });
},