Angular로 파일 다운로드

Angular로 파일 다운로드

버튼 클릭으로 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>

출력:

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 예제에서 파일 다운로드

지금 다운로드 버튼을 클릭하면 assets 폴더에 저장된 파일이 다운로드됩니다.

출력:

Angular에서 파일을 다운로드한 결과

튜토리얼이 마음에 드시나요? DelftStack을 구독하세요 YouTube에서 저희가 더 많은 고품질 비디오 가이드를 제작할 수 있도록 지원해주세요. 구독하다
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

관련 문장 - Angular Download