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에서도 동작하게끔 처리했다.

댓글 남기기