使用download属性可让HTML链接直接下载文件。1. 基本用法:<a href="file.pdf" download>下载PDF</a>触发下载而非打开;2. 自定义文件名:<a href="doc.pdf" download="用户手册.pdf">下载手册</a>使文件保存为指定名称;3. 支持类型包括PDF、图片、文档、压缩包等,但跨域且无CORS时可能失效;4. 动态内容可通过JavaScript创建Blob链接实现下载,如生成文本并触发下载。注意同源策略限制。

要让HTML链接点击后直接下载文件,而不是在浏览器中打开,可以通过给 a 标签添加 download 属性来实现。这个属性告诉浏览器应该下载目标文件,而不是导航到它。
基本语法:使用 download 属性
最简单的方法是在 a 标签中设置 download 属性:
<a href="path/to/file.pdf" download>下载PDF文件</a>点击该链接时,浏览器会尝试下载 file.pdf 文件,而不是在页面中打开它。
指定下载的文件名
你还可以通过为 download 属性赋值来自定义保存时的文件名:
立即学习“前端免费学习笔记(深入)”;
<a href="document.pdf" download="用户手册.pdf">下载手册</a>这样即使原文件叫 document.pdf,下载时默认保存为 用户手册.pdf。
支持的文件类型和限制
download 属性对大多数静态文件有效,例如:
- PDF 文件(.pdf)
- 图片(.jpg, .png, .gif 等)
- 文档(.docx, .xlsx, .txt)
- 压缩包(.zip, .rar)
- 音频/视频(部分浏览器可能仍会播放)
注意:如果文件位于跨域 URL 且服务器未配置CORS允许,download 属性可能无效,浏览器会退回到正常打开行为。
配合 JavaScript 动态触发下载
对于动态生成的内容(如 Blob),可以结合 JavaScript 创建临时下载链接:
const blob = new Blob(["Hello, 下载内容!"], { type: "text/plain" });const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
a.click();
URL.revokeObjectURL(url);
这种方式常用于导出文本、CSV 或前端生成的文件。
基本上就这些。只要合理使用 download 属性,并注意同源策略限制,就能轻松实现链接下载功能。











