[VueJS] 프로젝트 내 파일 다운로드 기능(download)

Nuxt, vue-cli 둘 다 모두 사용 가능하다.

먼저 Nuxt 방법

Nuxt 프로젝트 안에 static 디렉터리에 다운로드할 파일을 넣는다.

그리고 이벤트를 실행할 버튼과 경로를 아래와 같이 작성한다.

<v-btn href="/file/test" download>프로젝트 내부 파일 다운로드</v-btn>

 

이제 실행해서 저 버튼을 누르면 다운로드가 된다. 

 

vue-cli에서의 방법

cli 프로젝트 안에 public 디렉터리에 다운로드할 파일을 넣는다.

그리고 이벤트를 실행할 버튼과 경로를 아래와 같이 작성한다.

실행 후 버튼을 누르면 위에 처럼 똑같이 받아진다.

 

그리고 vuetify의 v-btn은 저런 식으로 v-btn에 href와 download를 넣으면 작동이 하지만

그냥 button 태그는 작동하지 않고, a 태그는 정상 작동한다.