在 Angular 中下载文件

Rana Hasnain Khan 2022年4月20日
在 Angular 中下载文件

我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

Angular 中的文件下载

在 Angular 中下载文件很简单。我们可以使用 HTML5 download 属性下载文件。

# angular
<a href="FilePath.csv"
class="btn"
target="_blank"
download="FileName.csv"
>Download Now</a>

例子

首先,我们将在 src 文件夹中创建一个 assets 文件夹,并将我们要下载的文件存储在 assets 文件夹中。

我们将在 app.component.html 中添加以下代码。

# angular
<hello name="{{ name }}"></hello>
<a href="assets/download.csv"
class="btn btn-default"
target="_blank"
download="download.csv"
>Download Now</a>

输出:

以 Angular 示例显示下载文件

我们将通过在 app.component.css 中添加以下代码来设置按钮样式。

# angular
p {
  font-family: Lato;
}
.btn{
  padding: 10px;
  background-color: blueviolet;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

输出:

在 css 之后以 Angular 示例下载文件

当我们点击 Download Now 按钮时,它将下载存储在 assets 文件夹中的文件。

输出:

angular 中的下载文件结果

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn