개요

toast ui grid(로직과 크게 상관없음)에 저장된 내용을 추출해서 링크로 비동기 통신하여 파일을 브라우저로 받고 압축해서 다운로드하는 로직이다.

라이브러리 Cdn 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

파일 클래스 생성 (커스텀)

class urlFileInfo {
    constructor(name, url) {
        this.name = name;
        this.url = url;
    }
}

class BlobFileInfo {
    constructor(name, blob) {
        this.name = name;
        this.blob = blob;
    }
}

파일 다운로드 함수

blob과 파일명을 받아서 다운로드 한다.

const downloadFile = (blob, name) => {
    const anchorElement = document.createElement("a");
    const localUrl = window.URL.createObjectURL(blob);
    anchorElement.href = localUrl;
    anchorElement.download = name;
    anchorElement.style.display = 'none';
    document.body.appendChild(anchorElement);
    anchorElement.click();
    document.body.removeChild(anchorElement);
    window.URL.revokeObjectURL(localUrl); // cleanup - 쓰임을 다한 url 객체 삭제
}

다중 파일 압축

blob파일리스트를 받아서 zip으로 압축하는 함수

const createZipFileByBlobFileInfoList = async (blobFileInfoList) => {
    const zip = new JSZip();
    blobFileInfoList.forEach(blobFileInfo => {
        zip.file(blobFileInfo.name, blobFileInfo.blob, {binary: true});
    });
    return await zip.generateAsync({type: 'blob'});
};

전체 로직

const downloadChartFiles = async () => {
    const partList = tuiGridPart.getCheckedRows();

    if (partList.length === 0) {
        alert("No part selected.");
        return;
    }

    const downloadFileInfoList = partList.map(part => {
        return Object.entries(part)
            .filter(([key, value]) => key.startsWith("file") && value !== null)
            .map(([key, value]) => {
                return new urlFileInfo(value.name, value.url);
            });
    }).flat(Infinity);
    const blobFileInfoList = await Promise.all(downloadFileInfoList.map(async (fileInfo) => {

        return await CustomAxios.instance.public({
            url: fileInfo.url,
            method: "GET",
            responseType: "blob",
        })
            .then(response => new Blob([response.data], {type: response.headers['content-type']}))
            .then(result => new BlobFileInfo(fileInfo.name, result));
    }));

    const zipBlob = await createZipFileByBlobFileInfoList(blobFileInfoList);

    downloadFile(zipBlob, `chartData_${Date.now()}.zip`);
}

단일 파일 다운로드 (번외)

위 내용과 다른 내용으로, 단일 파일을 받을 경우 사용한다.

url로 blob파일을 생성해서 위의 downloadFile 함수를 실행한다.

fetch 버전

const downloadUrl = (url, name) => {
    fetch(url)
        .then(res => res.blob())
        .then(result => {
            downloadFile(result, name);
        })
        .catch(error => {
            alert("An error occurred during file download.");
        });
}

axios 버전

const downloadUrl = (url, name) => {

    CustomAxios.instance.public({
        url: url,
        method: "GET",
        responseType: "blob",
    })
        .then(response => new Blob([response.data], {type: response.headers['content-type']}))
        .then(result => {
            downloadFile(result, name);
        });
}