[jquery] ajax로 파일 저장하기

jquery의 ajax로 파일을 다운로드 해야하는 상황이 생겼다.
인터넷에 있는 코드를 보고 작업을 했는데 xml 파일이나 json 파일을 다운로드 할 경우에 Blob 데이터를 jquery가 파싱을 시도해서 오류가 나는 문제가 있었다.

해결 방법으로 custom converters를 정의 해주는 방식으로 작업했다.

const download = (url) => {
    $.ajax({
        url: url,
        method: 'GET',
        processData: false,
        dataType: 'blob',
        xhr: function () {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            return xhr;
        },
        converters: {
            "* blob": (data) => {
                console.log(typeof data);
                return data instanceof Blob ? data : new Blob([data]);
            }
        },
        contents: {
            blob: /blob/
        },
        success: (data, status, xhr) => {
            const contentType = xhr.getResponseHeader('Content-Type');
            const blob = new Blob([data], { type: contentType });

            let fileName = xhr.getResponseHeader('Content-Disposition');
            if (fileName && fileName.indexOf('filename=') !== -1) {
                fileName = fileName.split('filename=')[1].replace(/"/g, '').trim();
            } else {
                const defaultName = 'download';
                const extension = getFileExtension(contentType);
                fileName = `${defaultName}${extension}`;
            }

            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(link.href);
        },
        error: (response) => {
            // error handling
        }
    });
}

const getFileExtension = (contentType) => {
    const mimeTypes = {
        'application/pdf': '.pdf',
        'application/msword': '.doc',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': '.docx',
        'application/vnd.ms-excel': '.xls',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': '.xlsx',
        'image/jpeg': '.jpg',
        'image/png': '.png',
        'text/plain': '.txt',
        'text/csv': '.csv'
    };
    return mimeTypes[contentType] || '';
}

위 코드는 아래처럼 사용하면 된다.

download(`여기에 url을 입력`)