JavaScript 文件下载功能实现原理解析

原创已于 2025-07-16 16:23:48 修改 · 495 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2025-07-16 16:21:39 首次发布

文章目录

概要

在用户无感知的情况下触发文件下载。其核心原理是通过创建并操作一个隐藏的 a 标签，利用浏览器对该标签的默认行为来实现文件下载。

例如：
vue 下载本地文件，前端自己现在本地文件不需要通过接口去下载

代码执行流程详解：

创建 DOM 元素

使用 document.createElement 动态创建一个 HTML 标签元素，该元素将作为下载操作的触发器。

const a = document.createElement('a');

配置下载属性

a.href = '/Xlsx/moban.xlsx';
a.download = '室分模版.xlsx';

href 属性指定文件的路径，这里指向应用根目录下的 /Xlsx/moban.xlsx 文件 download
属性指示浏览器下载该文件而非直接打开，等号后的字符串为下载后的文件名

隐藏 UI 元素

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();