Angular로 파일 다운로드
Rana Hasnain Khan
2024년2월15일
버튼 클릭으로 Angular에서 파일을 다운로드하는 방법을 소개하고 예시를 보여드리겠습니다.
Angular로 파일 다운로드
Angular에서 파일을 다운로드하는 것은 간단합니다. HTML5 download 속성을 사용하여 파일을 다운로드할 수 있습니다.
# angular
<a href="FilePath.csv"
class="btn"
target="_blank"
download="FileName.csv"
>Download Now</a>
예시
먼저 assets 폴더를 src 폴더에 만들고 다운로드하려는 파일을 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;
}
출력:
지금 다운로드 버튼을 클릭하면 assets 폴더에 저장된 파일이 다운로드됩니다.
출력:
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