Angular로 파일 다운로드
Rana Hasnain Khan
2024년2월15일
Angular
Angular File
Angular Download

버튼 클릭으로 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
폴더에 저장된 파일이 다운로드됩니다.
출력:
튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다
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