前端开发中，下载静态资源文件（如 Excel、Word、PDF 等）是一个常见需求。使用 HTML 的 <a> 标签，我们可以很方便地实现这些文件的下载功能。接下来，我们将介绍如何通过简单的技术手段，实现静态资源文件的下载。
一、基本原理
在 HTML 中，<a> 标签的 href 属性可以指向一个文件的 URL。当用户点击这个链接时，浏览器会尝试导航到该链接。若链接的目标是一个可下载的文件（如 PDF、Excel 或 Word 文件），浏览器会开始下载该文件，而不是直接在浏览器中打开它。
为了确保文件下载的行为，我们可以对 <a> 标签使用 download 属性。这个属性告诉浏览器在用户点击链接时，不是直接打开文件，而是下载文件。
二、具体实现
1. 准备静态文件
假设我们有几个静态文件存放在服务器上：
- report.pdf
- data.xlsx
- presentation.pptx
这些文件存储在我们网站的 /downloads/ 路径下。
2. HTML 结构
我们可以使用以下的 HTML 代码来创建下载链接：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件下载示例</title>
</head>
<body>
<h1>静态资源文件下载示例</h1>
<ul>
<li>
<a href="/downloads/report.pdf" download="年度报告.pdf">下载年度报告（PDF）</a>
</li>
<li>
<a href="/downloads/data.xlsx" download="数据表.xlsx">下载数据表（Excel）</a>
</li>
<li>
<a href="/downloads/presentation.pptx" download="演示文稿.pptx">下载演示文稿（PPT）</a>
</li>
</ul>
</body>
</html>
在上述代码中，我们为每个文件创建了一个下载链接。download 属性后面的值是文件下载时的默认名称。例如，点击“下载年度报告（PDF）”后，下载的文件将被命名为“年度报告.pdf”。
3. 在开发过程中注意事项
- 文件路径：确保文件路径正确。如果文件存储在服务器的不同目录下，需相应调整
href值。 - 跨域问题：如果链接的文件来源于其他域名，可能会受到 CORS（跨域资源共享）限制。需要确保服务器已设置了适当的 CORS 头。
- 浏览器兼容性：大多数现代浏览器均支持
download属性，但在某些情况下，使用download属性的链接可能不会生效，例如某些版本的 IE 浏览器。
4. 进阶应用
在一些复杂的场景中，我们可能需要使用 JavaScript 动态生成文件进行下载。这时可以使用 Blob 对象和 URL.createObjectURL() 方法。以下是一个简单的示例，展示如何使用 JavaScript 动态创建并下载文件。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态文件下载示例</title>
<script>
function downloadFile() {
const data = "这是一些示例文本，用于生成文件内容。";
const blob = new Blob([data], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '示例文本.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 释放内存
}
</script>
</head>
<body>
<h1>动态生成文件下载示例</h1>
<button onclick="downloadFile()">下载示例文本文件</button>
</body>
</html>
在这个例子中，点击按钮会动态生成一个文本文件并开始下载。我们使用 Blob 对象创建文件内容，并通过 URL.createObjectURL() 生成下载链接。
结论
通过使用 <a> 标签和适当的 HTML 属性，我们可以轻松实现静态资源文件的下载功能。结合 JavaScript，我们还可以在前端动态生成文件，增强用户体验。希望这篇文章能帮助你更好地理解和实现文件下载功能。
![若依[RuoYi-Vue]使用（五）- 认识ruoyi前端文件](http://img.makehui.com/601.jpg)
