关于门户网站建设,作品集模板网站,网站制作珠海公司,免费正版高清素材库用 JavaScript 的 axios 实现文件下载功能#xff0c;咱们要分几个步骤来搞定它#xff01;最主要的部分是处理 二进制数据#xff0c;可以生成一个进度检测#xff0c;然后把它保存为文件。
文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…用 JavaScript 的 axios 实现文件下载功能咱们要分几个步骤来搞定它最主要的部分是处理 二进制数据可以生成一个进度检测然后把它保存为文件。
文件名的获取二进制数据获取创建下载链接 const axios require(axios);const getFileNameFromContentDisposition (contentDisposition) {const fileNameMatch contentDisposition contentDisposition.match(/filename?([^])?/);return fileNameMatch ? fileNameMatch[1] : null;
};const getFileNameFromUrl (fileUrl) {return fileUrl.split(/).pop();
};const downloadFile async (fileUrl, defaultFileName downloaded-file) {try {const response await axios({url: fileUrl,method: GET,responseType: blob, // 以二进制方式接收数据onDownloadProgress: (progressEvent) {// progressEvent 包含了下载进度信息const total progressEvent.total; // 文件总大小const loaded progressEvent.loaded; // 已经下载的部分// 计算进度百分比const percentage Math.floor((loaded / total) * 100);// 显示进度可替换为实际的进度条console.log(下载进度${percentage}%);}});// 获取文件名let fileName getFileNameFromContentDisposition(response.headers[content-disposition]) || getFileNameFromUrl(fileUrl) || defaultFileName;// 创建 Blob 对象const blob new Blob([response.data], { type: response.headers[content-type] });// 创建 Blob URLconst blobUrl window.URL.createObjectURL(blob);// 创建 a 元素并触发下载const link document.createElement(a);link.href blobUrl;link.download fileName;// 将 a 元素添加到 DOM 并触发点击document.body.appendChild(link);link.click();// 移除 a 元素document.body.removeChild(link);// 释放 Blob URLwindow.URL.revokeObjectURL(blobUrl);} catch (error) {console.error(文件下载失败: , error);}
};// 调用下载函数传入文件URL
downloadFile(https://example.com/path/to/your/file.pdf); 从代码优化和健壮性角度出发我们可以把这三种文件名获取方式结合起来优先从响应头中提取文件名然后如果没有Content-Disposition头再从 URL 提取文件名最后可以提供一个默认文件名作为兜底方案。此外考虑到代码可读性和可维护性上面代码做一些清晰的封装与优化处理。 文件名获取逻辑封装 getFileNameFromContentDisposition专门用于从 Content-Disposition 头部提取文件名使用正则匹配考虑了有引号和没有引号的情况。getFileNameFromUrl用于从 URL 提取文件名确保从路径最后一部分获取到文件名。优先级先从 Content-Disposition 获取文件名如果没有再从 URL 提取最后使用默认文件名。 默认文件名 提供了 defaultFileName 参数确保当无法从响应头和 URL 获取文件名时仍然有一个合理的文件名用于下载。 异常处理 使用 try-catch 包围整个下载过程确保即使出现网络或其他问题错误也能被捕获并输出到控制台而不会影响页面的其他功能。 内存管理 确保 window.URL.revokeObjectURL(blobUrl) 在文件下载后被调用释放 Blob URL防止内存泄漏。
健壮性和可扩展性
健壮性我们确保了即使某个步骤失败代码也能继续运行。文件名无法从响应头或 URL 获取时始终有一个默认文件名兜底。可扩展性如果未来需要支持更多的文件名获取逻辑或更复杂的响应头处理只需修改或添加新的获取方式即可而不会影响整体代码结构。 为什么可以立即移除 a 元素
点击事件link.click() 触发后浏览器会处理下载请求下载任务已经在后台进行。a 元素的点击只是用来启动这个过程。
DOM 操作与事件的异步性浏览器在处理用户点击和下载之间有一定的时间差移除 a元素是在 click 事件完成后进行不会影响已经发出的下载请求。 为什么不用关注文件类型
下载文件的前置条件中不依赖于文件的具体类型实际上代码对文件类型的处理是比较通用的。这是通过以下几个方面实现的
1. 响应类型的设置
在 Axios 请求中我们将 responseType 设置为 blob这意味着无论文件类型是什么浏览器都将其作为 Blob 对象处理。Blob 可以表示二进制数据而不关心其具体的内容类型。
2. Content-Type 的使用
在创建 Blob 时我们根据响应头中的 Content-Type 来设置 Blob 的 MIME 类型。这使得文件在下载时能够被浏览器正确识别和处理const blob new Blob([response.data], { type: response.headers[content-type] });3. 文件名的获取
文件名的获取逻辑同样不依赖于文件类型。我们根据 Content-Disposition 头部或 URL 提取文件名。这样无论是 PDF、图片、文本文件还是其他任何类型的文件代码都能正确生成文件名并完成下载。
4. 下载时的文件处理
浏览器会根据 Blob 的 MIME 类型和下载时提供的文件名来决定如何处理文件。例如对于 PDF 文件浏览器会使用 PDF 阅读器打开它而对于图片文件则会直接展示。
注意事项 特殊文件类型处理虽然以上代码可以处理多种类型的文件但某些文件如 HTML 文件可能会受到浏览器的默认行为影响。例如某些文件可能会直接在浏览器中打开而不是下载。这是由浏览器对特定 MIME 类型的处理决定的无法通过代码控制。 服务器的配置如果服务器没有正确设置 Content-Disposition 头部或者对某些文件类型没有指定 MIME 类型可能会导致文件下载或命名不正确。因此确保服务器正确配置是关键。
