5초 뒤 자동 다운로드 링크 버튼 HTML + 자바스크립트 코드

이 코드는 N초 뒤 자동 다운로드되는 HTML과 자바스크립트 코드를 정리한 페이지입니다. 또한 자동 다운로드가 실패하면 수동으로 다운로드 할 수 있는 버튼도 같이 들어있습니다. 조만간 이걸 써먹을 것 같기에 한번 도전해 보려고 미리 구현을 해둔 것입니다. 컴퓨터에도 저장해뒀는데 역시 가장 좋은건 블로그에 기록해두는게 최고인 것 같아요. 왜냐하면 이 부분은 다른 사람들도 알고 있으면 좋을 것 같았기 때문입니다.

자동 및 수동 다운로드 HTML 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

< !DOCTYPE html > < html lang="ko" > < head >     < meta charset="UTF-8" >     < title >자동 및 수동 다운로드 페이지< / title >     < script >         function downloadFile() {             var link  = document.createElement('a');             link.href  = '파일 URL 주소';             link.download  = '파일명.확장자';             document.body.appendChild(link);             link.click();             document.body.removeChild(link);         }           window.onload  = function() {             setTimeout(function() {                 try {                     downloadFile();                 } catch (e) {                     console.error("자동 다운로드 실패:", e);                 }             }, 5000); // 5초 (10000은 10초)         };     < / script > < / head > < body >     < h1 >파일 다운로드< / h1 >     < p >파일이 5초 후에 자동으로 다운로드됩니다. 자동으로 다운로드가 안 되는 경우에는 아래 버튼을 클릭하시기 바랍니다.< / p >     < button onclick="downloadFile()" >다운로드< / button > < / body > < / html > Colored by Color Scripter

cs

이 코드를 그대로 복사하시어 사용하시면 되며 수정해야 할 부분은 한글로 입력된 부분입니다. 파일 URL 주소와 파일명입니다. 해당 부분을 다운로드 파일과 일치시켜주시면 됩니다. 또한 5초가 아닌 원하는 시간으로 변경하시려면 주석으로 처리되어있는 부분의 값을 변경하시면 됩니다. 위의 코드에서는 5,000으로 입력되어있는데 이는 ms 단위의 시간입니다. 즉 1,000이 1초인 것입니다. 따라서 10초로 변경하려 한다면 10,000을 입력하면 됩니다. 이 코드는 별도로 테스트를 해봤으며 작동이 잘 됨을 확인했습니다.

아주 굳!

참고로 이 코드를 적용시키기 위해서는 티스토리나 구글블로거같은 대기업 플랫폼보다는 개인이 직접 서버를 개설하고 운영하는 웹페이지에서 사용하시는게 좋습니다. 그래야 정상 작동할 것입니다.

CSS

CSS 부분은 없습니다. 그야말로 HTML 기본 형태입니다. 따라서 별도의 스타일을 만드시려면 HTML 요소에 클래스명을 부여하여 입맛에 맞게 꾸미시면 됩니다. 이 부분은 나중에 제가 직접 적용시키게 되는 경우에 추가 업데이트를 하겠습니다. 오늘 내용 끝!