488. (javaScript) [간단 소스] 자바스크립트 파일 다운로드 URL 유효성 검증 및 URL.createObjectURL 와 a 태그 사용해 파일 다운로드 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / URL.createObjectURL / a tag


- 사전) a 태그 download 속성 설명 정리 : 

  >> <a> 태그 download 속성은 링크를 페이지로 이동 (navigate) 하지 않고 파일로 다운로드하도록 브라우저에 요청합니다

  >> 파일 다운로드 관련 우선 순위 :

    - 서버 응답 헤더 : Content-Disposition: attachment; filename="..." 포함

    - download 속성의 값 : <a download="원하는이름.ext"> 포함

    - URL에서 추정한 이름 : 예) .../file.pdf → file.pdf 사용


- 사전) URL.createObjectURL 설명 정리 : 

  >> URL.createObjectURL() 은 브라우저 내부(메모리)에 Blob이나 File 데이터를 위한 임시 URL(Object URL)을 생성하는 함수입니다

    - 파일이나 바이너리 데이터를 '실제 서버에 업로드하지 않고도' URL처럼 다룰 수 있게 만들어주는 기능

  >> URL.createObjectURL() 은 fetch 로 Blob 을 받아서 파일을 다운로드할 때 자주 사용됩니다

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

// [파일 다운로드 URL 변수 생성]
const fileUrl = "https://twok.com/log.txt";
const fileName = "save_log.txt"; // 로컬에 저장 될 파일 명칭


// ✅ [fetch api 사용해 실제로 파일 다운로드 가능한 URL 인지 유효성 검증]
const res = await fetch(String(fileUrl), { method: 'GET' });
                    
console.warn("Http Get 호출 파일 실제 다운로드 가능성 체크 Request 수행");

if (!res.ok) { // ❌ [에러가 발생]
  console.error("Http Get 호출 파일 실제 다운로드 가능성 체크 Error 발생 확인");
}
else { // ✅ [정상 호출 성공]
  console.warn("Http Get 호출 파일 실제 다운로드 가능성 체크 Response 확인 완료");
  
  // [fetch res to blob]
  const blob = await res.blob();

  // [URL.createObjectURL 생성] : fetch → Blob → ObjectURL로 강제 다운로드
  const blobUrl = URL.createObjectURL(blob);

  const a = document.createElement('a'); // ✅ a 태그 생성
  a.href = blobUrl; // url 지정
  a.download = decodeURIComponent(String(fileName)); // 다운로드 되는 파일 명칭 지정
  document.body.appendChild(a);

  a.click(); // 파일 다운로드 수행
  
  a.remove(); // 태그 다시 제거

  URL.revokeObjectURL(blobUrl);

}

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[Web] 자바스크립트 setInterval 사용해 주기적 반복 타이머 동작 및 a 태그 파일 다운로드 (blob download) 백업 로직

https://kkh0977.tistory.com/8591

https://blog.naver.com/kkh0977/224160509196?trackingCode=blog_bloghome_searchlist


[HTTP 헤더 Content-Disposition 설명 및 attachment 파일 다운로드 설명]

https://kkh0977.tistory.com/6371

https://blog.naver.com/kkh0977/223476187644?trackingCode=blog_bloghome_searchlist


[자바스크립트 AWS S3 Get 요청 및 Put 업로드 PreSignedUrl 프리 사인 URL 주소 생성 수행 - getSignedUrl]

https://blog.naver.com/kkh0977/223903767776

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8591

170. (TWOK/LOGIC) [Web] 자바스크립트 setInterval 사용해 주기적 반복 타이머 동작 및 a 태그 파일 다운로

---