PDF 직접 다운로드 처리

웹브라우저에서 PDF 링크를 열면 내장 PDF 뷰어가 뜬다.

이 때 PDF의 주소 도메인이 현재 도메인과 같다면, 아래처럼 간단하게 처리 가능하다.

<a href="{URL}" download="">PDF Download</a>Code language: HTML, XML (xml)

이 때 download 속성에 파일 이름을 넣어서 별도의 이름을 줄 수도 있다.

그런데 이 방법은 외부 URL에는 통하지 않는다. 다른 도메인에 있는 PDF를 굳이 다운로드 처리하고 싶은 변태들을 위해서는 자바스크립트를 사용해 보자.

(function () {
    function checkDomain(url) {
        if (url.indexOf('//') === 0) {
            url = location.protocol + url;
        }
        return url.toLowerCase().replace(/([a-z])?:\/\//, '$1').split('/')[0];
    }

    function isExternal(url) {
        return ((url.indexOf(':') > -1 || url.indexOf('//') > -1) && checkDomain(location.href) !== checkDomain(url));
    }

    function downloadFile(url, callback) {
        var filename = url.split('/').pop()
            , req = new XMLHttpRequest()
        ;

        req.open('GET', url, true);
        req.responseType = 'blob';
        req.onload = function () {
            var blob = new Blob([req.response], {
                type: 'application/pdf',
            });

            var isIE = !!document.documentMode;

            if (isIE) {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var windowUrl = window.URL || window.webkitURL;
                var href = windowUrl.createObjectURL(blob);
                var a = document.createElement('a');
                a.setAttribute('download', filename);
                a.setAttribute('href', href);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }

            if (callback) {
                callback();
            }
        };

        req.send();
    }

    window.downloadControl = {
        checkDomain: checkDomain,
        isExternal: isExternal,
        downloadFile: downloadFile
    }
})();
Code language: JavaScript (javascript)

위 스크립트에서 전역 변수 downloadControl 을 지정했다. 이 스크립트는 공통으로 사용하고, 다른 스크립트 파일에서 아래처럼 써 보자.

$('.link').on('click', function (e) {
    var target = e.currentTarget
        , url = target.href;

    if (downloadControl.isExternal(url)) {
        e.preventDefault();
        target.href = '';
        downloadControl.downloadFile(url, function () {
            target.href = url;
        });
    }
});Code language: JavaScript (javascript)

대충 이런 식으로 처리한다. IE11에서도 동작하게끔 처리했다.