YoTo Blog

자바스크립트 Fetch 파일 다운로드


자바스크립트 Fetch 파일 다운로드

Spring 다운로드에 이어 클라이언트부분도 만들어보자.
심플하게 필요한 소스만 넣었다.


소스

함수 만들기

사용하기 편하게 함수로 만들어 사용하자.

// Fetch 파일 다운로드 함수
const fileDownloadFetch = async(name, path) => {
    fetch(path).then(res => res.blob()).then(data => {
        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(data);
        a.download = name;
        a.click();
    });
}

함수 호출

위에서 만들어진 함수를 실행하는 방법이다.

// 다운로드 실행
// 실제 파일명과 확장자, path부분으 컨트롤러에서 저장된 파일이름을 넣는다.
fileDownloadFetch('실제파일이름.txt', '/file/UUID__실제파일이름.txt');

예제

다른 예제

스프링 서버단 업로드
스프링 서버단 다운로드
클라이언트 자바스크립트 Fetch 업로드
클라이언트 자바스크립트 Fetch 다운로드