如何实现点击按钮下载.zip文件？已完成按钮样式开发需添加下载功能

方案1：用a标签替代button（原生支持，无需额外JS，更推荐） #

a标签自带的download属性是浏览器原生支持的下载触发方式，实现成本最低，兼容性最好。你只需要做两处修改：

• 原有.download样式追加两个属性，适配a标签的默认样式：

  .download {
    /* 原有样式保留，新增以下两行 */
    text-decoration: none;
    display: inline-block;
  }
  

• 把button标签替换为a标签，补充href和download属性：

  <a href="你的压缩包路径.zip" class="download" download>
    <i class="fa fa-download"></i> <b>Download Source Code Files</b>
  </a>
  

修改后的完整代码如下：

<style>
.download {
  width: 280px;
  background-color: DodgerBlue;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* 新增适配a标签的属性 */
  text-decoration: none;
  display: inline-block;
  color: #000; /* 可根据需要调整文字颜色 */
}
.download:hover {
  background-color: RoyalBlue;
  color: white;
}
.download:active {
  background-color: RoyalBlue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<body>
<a href="your-file.zip" class="download" download>
  <i class="fa fa-download"></i> <b>Download Source Code Files</b>
</a>
</body>

把代码里的your-file.zip替换为你实际的zip文件存放路径即可。 #

方案2：保留button标签，通过JS实现下载 #

如果业务场景必须使用button元素，可以给按钮绑定点击事件，动态创建a标签触发下载：
修改后的完整代码如下：

<style>
.download {
  width: 280px;
  background-color: DodgerBlue;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.download:hover {
  background-color: RoyalBlue;
  color: white;
}
.download:active {
  background-color: RoyalBlue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<body>
<button class="download"><i class="fa fa-download"></i> <b>Download Source Code Files</b></button>

<script>
const downloadBtn = document.querySelector('.download')
downloadBtn.addEventListener('click', () => {
  // 创建临时a标签
  const a = document.createElement('a')
  // 替换为你的zip文件路径
  a.href = 'your-file.zip'
  // 触发下载
  a.download = ''
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
})
</script>
</body>

同样把your-file.zip替换为实际的zip文件路径即可生效。

内容的提问来源于stack exchange，提问作者Harsh Sharma