[vue.js] excel 다운로드 구현하기

1. request

헤더를 blob로 받기

excelDownload: (url, param) => {
  return axios.get(`${API_URL}${url}`, {
    params: param,
    responseType: "blob",
  });
},

const downloadExcel = () => {
  data.value.loading = true;
  commonService.download({ data.value.param }).then(
    (d) => {
      if (d.status === 200) {
        // 파일 이름 추출
        const contentDisposition = d.headers["content-disposition"];
        const filename = contentDisposition.split("filename=")[1];

        const url = window.URL.createObjectURL(new Blob([d.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();

        // 링크 요소 삭제
        document.body.removeChild(link);
        data.value.loading = false;
      } else {
        store.setSnackbarMsg({ text: d.data.errorMessage, result: 500 });
        data.value.loading = false;
      }
    }
  );
};

<v-btn-download @click="downloadExcel" :loading="data.loading" block>
  엑셀 다운로드
</v-btn-download>

 

 

출처:

https://stackoverflow.com/questions/38975718/how-to-download-excel-xls-file-from-api-in-postman

https://www.chaerin.dev/Javascript/excel/