学工管理系统
小明：嘿，小李，我最近在做一个学生工作管理系统，想加入文件下载的功能，你能帮我想想办法吗？
小李：当然可以！我们可以用HTML、CSS和JavaScript来实现这个系统。首先，你需要一个简单的页面结构。
小明：好的，那我们先创建HTML文件吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生工作管理系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>学生工作管理系统</h1>
</header>
<main>
<section id="file-list">
<h2>文件列表</h2>
<ul id="files">
<li data-file="example.pdf"><a href="#">example.pdf</a></li>
<li data-file="report.docx"><a href="#">report.docx</a></li>
</ul>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
小李：这是基本的HTML结构，接下来是CSS样式。
body {
font-family: Arial, sans-serif;
}
main {
padding: 20px;
}
ul {
list-style-type: none;
}
li {
margin-bottom: 10px;
}
小明：看起来不错，现在怎么让文件能够下载呢？
小李：我们可以用JavaScript监听点击事件，并触发下载。
document.querySelectorAll('#files li').forEach(item => {
item.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
const fileName = item.getAttribute('data-file');
const link = document.createElement('a');
link.href = `files/${fileName}`;
link.download = fileName;
document.body.appendChild(link);
link.click();
link.remove();
});
});
小明：太棒了！这样用户就可以直接从页面上下载文件了。
小李：没错，而且这个方法非常灵活，你可以根据需求调整文件路径或者增加更多功能。
小明：谢谢你，小李！我现在对完成这个项目更有信心了。
小李：不客气，有问题随时找我！
]]>
