在 React中，有文件url，如何成功下载各类文件

使用实例：

downloadFile(fileUrl, fileName);
下载文件的方法(文件的url地址，文件的名称/自定义下载文件名称)

  最终代码：

function downloadFile(url, fileName) {  
    fetch(url)  
        .then(response => response.blob())  
        .then(blob => {  
            const url = window.URL.createObjectURL(blob);  
            const link = document.createElement('a');  
            link.href = url;  
            link.setAttribute('download', fileName);  
            document.body.appendChild(link);  
            link.click();  
            window.URL.revokeObjectURL(url);  
            document.body.removeChild(link);  
        })  
        .catch(error => console.error('Error downloading file:', error));  
}

 旧的写法： 

function downloadFile(url, fileName) {  
    // 创建a标签，用于跳转至下载链接  
    const tempLink = document.createElement('a');  
    tempLink.style.display = 'none';  
    tempLink.href = url; // 设置文件的URL  
    tempLink.setAttribute('download', fileName); // 设置下载文件名  
  
    // 挂载a标签  
    document.body.appendChild(tempLink);  
    tempLink.click(); // 模拟点击事件  
    document.body.removeChild(tempLink); // 清理  
}  

（使用简单的 <a> 标签和 download 属性）依赖于浏览器直接处理下载请求，这可能会受到浏览器默认行为和安全性策略的影响。特别是当涉及到跨域资源时，浏览器可能会阻止自动下载，因为它可能出于安全原因不允许跨域下载操作，或者它可能只是根据资源的 MIME 类型默认显示资源（如图片在浏览器中显示）

而最终修改代码，该下载方法使用了 fetch API 和 Blob 对象来处理下载，

1、跨域请求：fetch API 允许你发送跨域请求，只要服务器设置了正确的 CORS（跨源资源共享）头

2、Blob 对象：当从 fetch 请求中获取响应时，你将响应体转换为 Blob 对象。Blob 对象表示一个不可变的原始数据块，可以被读为二进制数据或文本。在这种情况下，它用于表示从服务器获取的文件内容。

3、createObjectURL：window.URL.createObjectURL 创建一个 DOMString，包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期与创建它的文档绑定。在这种情况下，它用于创建一个指向 Blob 对象的 URL，这个 URL 可以被设置为 <a> 标签的 href 属性，以便触发下载。

4、下载控制：通过使用 Blob 对象和 createObjectURL，你可以绕过浏览器对资源默认处理的行为。无论资源的 MIME 类型是什么（图片、PDF、文本文件等），只要你可以获取到资源的 Blob 表示，你就可以使用这种方法触发下载。

5、安全性：虽然 fetch 和 Blob 允许更多的灵活性，但它们也受到浏览器安全性策略的限制。如果服务器不允许跨域请求，或者资源受到其他形式的保护（如需要认证或特定请求头），则你可能无法下载资源。

6、清理：在创建对象 URL 后，使用 window.URL.revokeObjectURL 清理 URL 是一个好习惯，因为它可以释放浏览器保留的用于该 URL 的资源。

注：使用 fetch 和 Blob 对象的方法提供了更多的灵活性和控制力来触发文件下载，特别是当涉及到跨域资源或需要绕过浏览器默认行为时。