在 Angular 中下載檔案
Rana Hasnain Khan
2022年4月20日
我們將介紹如何通過單擊按鈕在 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>
輸出:
我們將通過在 app.component.css
中新增以下程式碼來設定按鈕樣式。
# angular
p {
font-family: Lato;
}
.btn{
padding: 10px;
background-color: blueviolet;
color: white;
border-radius: 5px;
text-decoration: none;
}
輸出:
當我們點選 Download Now
按鈕時,它將下載儲存在 assets
資料夾中的檔案。
輸出:
Author: Rana Hasnain Khan
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