如何制作下载.zip文件的下载按钮[重复]答案

【问题标题】：How to make a download button that downloads .zip files [duplicate]如何制作下载.zip文件的下载按钮[重复]
【发布时间】：2021-11-19 19:09:39
【问题描述】：

我已经制作了一个下载按钮，但我还想添加一个功能，当点击它时，它会下载 .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>

【问题讨论】：

将其设为链接，然后添加下载属性，或者如果设置了内容处置标头等则在新窗口中打开
嗨！抱歉，您只提供给我们演示部分，没有任何代码，您尝试实现下载的任何功能。
请编辑您的问题并添加相关代码段，以展示您自己解决此问题的最佳尝试，然后解释您的代码中的哪些点您没有得到预期的结果。您现在问题中的代码与下载文件所需的逻辑无关，或者缺少有助于我们回答问题的详细信息。我们需要了解您正在尝试做什么才能提供帮助。否则，这只是一个悬而未决的问题，没有细节。

标签： javascript html css button download

【解决方案1】：

要下载.zip 文件，只需将网址放入链接中，如下所示：

.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);
}

&lt;br&gt;&lt;a href="https://www.example.com/example.zip" class="download"&gt;&lt;i class="fa fa-download"&gt;&lt;/i&gt; &lt;b&gt;Download Source Code Files&lt;/b&gt;&lt;/a&gt;

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

【讨论】：

最好将此问题标记为重复，而不是回答明显的重复。

【解决方案2】：

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

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

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

【讨论】：