엑셀 파일을 다운로드 기능을 구현할때가 있다.
오늘은 해당 기능에 대해서 살펴보려한다.
보통 엑셀 다운로드용 api를 받아서 사용하는데, GET과 POST 2가지 방법이있다.
값을 받아서 구현하는 순서는 아래와 같다.
try{
const res = await excelFile(); // 엑셀 데이터 넘겨주는 함수
const url = window.URL.createObjectURL(
new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
);
}....
여기서 res.data, 즉 엑셀데이터의 값은 우리가 알아들을 수 없이 'PK\x03\x04\x14\x00\x00\x0..' 이런식으로 데이터가 반환된다. 이런 데이터가 넘어온다면 당황하지 말고 잘하고 있다고 판단하면 된다 :)
api 를 통해 받아온 값을 url 화 한다. URL.createObjectURL() 함수는 객체가 가르키는 URL을 반환하는 역할을 한다.
해당 URL은 이걸 생성한 document가 사라지면 사라진다!
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' } 이 값은 엑셀포멧에 맞는 값이다. 우린 엑셀을 다운로드 할 것이기에 해당 타입을 사용해준다.
try{
const res = await excelFile(); // 엑셀 데이터 넘겨주는 함수
const url = window.URL.createObjectURL(
new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}....
준비는 끝났고 다운로드만 해주면된다!
위에서 만든 url을 가상으로 만든 a 태그에 연결해주고
click()을 강제로 실행하여 다운로드 절차를 밟을 수 있다. 여기에 fileName을 추가하여 원하는 파일로 다운로드 받을 수 있게끔 할 수 있다.
이렇게 진행되고 엑셀 파일이 정상적으로 다운되더라도 파일이 열리지 않는 경우도 있다.
그건.. api 요청시에 타입을 제대로 지정해주지 않았을 확률이 있다.
아래 처럼 GET 인지, POST인지에 따라서 responseType을 꼬옥 추가or 확인해 보기를 추천한다.
// GET
export excelGETDownload = () => {
const res = await api.get(
'/execel/download',
{responseType: 'blob'}
)
}
// POST
export const excelPOSTDownload = (payload) => {
const res = await api.post(
'/execel/download',
{...payload},
{responseType: 'blob'}
)
}
'Front-end' 카테고리의 다른 글
CORS, 데이터 크기도 범인일 수 있다. (0) | 2025.03.06 |
---|---|
ios14 혹은 하위 버전의 ios 에서 먹지 않는 css 한가지 (inset 속성) (0) | 2025.01.21 |
Expected positive integer for height but received 0 of type number 해결하기 (0) | 2024.12.11 |
redirect가 작동하지 않아요.. redirect의 나 빼고 모두가 아는 비_밀 (0) | 2024.09.24 |
Warning: Extra attributes from the server: cz-shortcut-listen (1) | 2024.09.20 |