如何制作下载 .zip 文件的下载按钮

Question

我制作了一个下载按钮，但我还想添加一个功能，当点击它时会下载 .zip 文件。

我的代码：

<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>
</body>

Answer 1

要下载 .zip 文件，只需将 url 放在 link 中，如下所示：

.download {
  width: 280px;
  text-decoration: none;
  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;
  color: white;
}
.download:hover {
  background-color: RoyalBlue;
  color: white;
}
.download:active {
  background-color: RoyalBlue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

<br><a href="https://www.example.com/example.zip" class="download"><i class="fa fa-download"></i> <b>Download Source Code Files</b></a>

只需确保将 url 替换为您的 zip 文件。

Answer 2

您将需要一个 <a></a> 并像这样使用它：

<a download="1" `href`="2">Download</a>

1 -> 在这里你将输入你希望下载的文件具有的名称 2 -> 在这里你将放置你要下载的文件的路径

如何制作下载 .zip 文件的下载按钮

How to make a download button that downloads .zip files

html

javascript

css

download

button