JavaScript 文件下载功能实现原理解析
文章目录
- 概要
- 代码执行流程详解：
- 创建 DOM 元素
- 配置下载属性
- 隐藏 UI 元素
- 挂载到文档树
- 触发下载行为
- 清理临时元素
概要
在用户无感知的情况下触发文件下载。其核心原理是通过创建并操作一个隐藏的 a 标签，利用浏览器对该标签的默认行为来实现文件下载。
例如：
vue 下载本地文件，前端自己现在本地文件不需要通过接口去下载
代码执行流程详解：
const a = document.createElement('a');
a.href = '/Xlsx/moban.xlsx';
a.download = '室分模版.xlsx';
- href 属性指定文件的路径，这里指向应用根目录下的 /Xlsx/moban.xlsx 文件 download
- 属性指示浏览器下载该文件而非直接打开，等号后的字符串为下载后的文件名
a.style.display = 'none';
通过 CSS 样式将元素隐藏，避免在页面上显示多余的链接，提升用户体验。
document.body.appendChild(a);
将创建的 <a> 元素添加到文档的 <body> 中，使其成为 DOM 的一部分。这一步是必需的，
因为只有在文档树中的元素才能正确触发浏览器事件。
a.click();
通过 JavaScript 模拟鼠标点击事件，触发 <a> 标签的默认行为。
当用户点击一个带有 href 和 download 属性的链接时，浏览器会自动下载指定的文件。
a.remove();
下载完成后，将临时创建的 <a> 元素从 DOM 中移除，避免占用不必要的内存和 DOM 节点。
完整代码 块
// 创建一个<a></a>标签const a = document.createElement('a');a.href = '/Xlsx/moban.xlsx'; // 文件路径在 public下a.download = '室分模版.xlsx';// 障眼法藏起来a标签a.style.display = 'none';// 将a标签追加到文档对象中document.body.appendChild(a);// 模拟点击了<a>标签,会触发<a>标签的href的读取,浏览器就会自动下载了a.click();// 一次性的,用完就删除a标签a.remove();