在 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