[VUE.JS] Axios를 사용하는 Vue.js의 파일 다운로드 구성

<template>
  <a @click="downloadFile">Download</a>
</template>

<script>
import axios from "axios";

export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get("/api/download", {
          responseType: "blob"
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "file.pdf");
        document.body.appendChild(link);
        link.click();
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

downloadFile 메서드는 Axios를 사용하여 /api/download GET 요청을 하고 responseType을 "blob"으로 설정하여 응답에 이진 데이터가 포함됨을 나타냅니다. 그런 다음 서버의 응답을 사용하여 객체 URL을 작성하고, 이는 새로 작성된 요소의 href 속성으로 설정됩니다. 다운로드 특성은 원하는 파일 이름으로 설정되고, 요소는 문서 본문에 추가됩니다. 마지막으로 링크를 클릭하여 다운로드를 시작합니다.