javascript 로 파일 다운로드 처리하기 (javascript file download) ✔

반응형

javascript 로 파일 다운로드 처리하기 (javascript file download)

 

 

자바스크립트 만으로 파일을 다운로드 하는 방법을 찾긴 했는데, IE 및 EDGE 브라우저에서 새창 띄우는 부분이 조금 이슈가 있네요.

 

PC 환경의 크롬에서는 잘 되고 있는것을 확인했습니다. 모바일 기기 환경에서는 안되니 참고하시기 바랍니다.

 

참고 사이트 : https://fils.tistory.com/742

var browserName = undefined;
var userAgent = navigator.userAgent;

switch (true) {
    case /Trident|MSIE/.test(userAgent):
        browserName = 'ie';
        break;

    case /Edge/.test(userAgent):
        browserName = 'edge';
        break;

    case /Chrome/.test(userAgent):
        browserName = 'chrome';
        break;

    case /Safari/.test(userAgent):
        browserName = 'safari';
        break;

    case /Firefox/.test(userAgent):
        browserName = 'firefox';
        break;

    case /Opera/.test(userAgent):
        browserName = 'opera';
        break;

    default:
        browserName = 'unknown';
}


//ie 브라우저 및 EDGE 브라우저 
if (browserName == 'ie' || browserName == 'edge') {

    //ie11
    var _window = window.open(url, "_blank");
    _window.document.close();
    _window.document.execCommand('SaveAs', true, "file.hwp" || url)
    _window.close();
} else {

    //chrome
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
        a.download = filename; // Set the file name.
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        delete a;
    };
    xhr.open('GET', url);
    xhr.send();
}

 

---

 

JavaScript 로 image file 이미지 파일 다운로드 하는 경우

 

<a href="javascript:void(0);" onclick="downloadImg('/Content/images/shareInstagram.jpg')" class="main-btn__download">
  <span class="txt-hidden">이미지 다운로드</span>
</a>

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

function downloadImg(imgSrc) {
    var image = new Image();
    image.crossOrigin = "anonymous";
    image.src = imgSrc;
    var fileName = image.src.split("/").pop();
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.getContext('2d').drawImage(this, 0, 0);
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(dataURLtoBlob(canvas.toDataURL()), fileName);
        } else {
            var link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = fileName;
            link.click();
        }
    };
}

반응형

저작자표시비영리동일조건