172. (TWOK/LOGIC) [Web] 자바스크립트 fetch api 사용해 파일 다운로드 URL 검증 및 a 태그 동적 생성 파일 다운로드 로직 정리

---

[로직 정리]

​

정리 로직 : AWS / WebRTC / Viewer

​

상태 : [Web] 자바스크립트 fetch api 사용해 파일 다운로드 URL 검증 및 a 태그 동적 생성 파일 다운로드 로직 정리

​

 

---

[설 명]

​

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Web] 자바스크립트 fetch api 사용해 파일 다운로드 URL 검증 및 a 태그 동적 생성 파일 다운로드 로직 정리


2. 테스트 환경 : Web / JavaScript / Chrome


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

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

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

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

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

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


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

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

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

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

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 자바스크립트에서 window.prompt 창을 활성화 한 후 파일 다운로드 할 URL 정보를 사용자로부터 입력 받습니다.

  var input = window.prompt('\n' + '파일 다운로드를 수행할 url 정보를 입력해주세요.' + '\n');


2. 입력 된 값이 null 이 아닌 지 체크 수행 후 get 방식으로 fetch api 를 호출합니다

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


  // ✅ [fetch api 사용해 실제로 파일 다운로드 가능한 URL 인지 유효성 검증]
  const res = await fetch(String(fileUrl), { method: 'GET' });


3. fetch api 호출 후 response 응답 값 에러, 성공 여부 분기 처리 로직을 작성합니다.

  if (!res.ok) { // ❌ [에러가 발생]
    console.error("Http Get 호출 파일 실제 다운로드 가능성 체크 Error 발생 확인");
  }
  else { // ✅ [정상 호출 성공]
    console.log("Http Get 호출 파일 실제 다운로드 가능성 체크 Success 확인");

    // ... 코드 계속 ...
  }


4. fetch api 성공 로직 부분에서 response 데이터를 blob 으로 변환 후 URL.createObjectURL 와 a 태그를 활용해 실제 파일 다운로드를 수행합니다

  // [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);


5. 정상적으로 파일이 다운로드 폴더에 저장 된 것을 확인합니다.


6. 참고 사항 : URL.createObjectURL 를 사용하는 이유

  >> html 파일 확장자 같은 경우는 파일 다운로드가 되지 않고 '열기' 동작이 될 수 있어 강제 다운로드를 위해 사용

// --------------------------------------------------------------------------------------






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

[자바스크립트 AWS STS 임시 자격 증명 사용 및 Long 형식 S3 파일 다운로드 GetPreSignedUrl 프리 사인 URL 주소 생성]

https://kkh0977.tistory.com/8524

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


[new Blob 사용해 json 파일 , text 텍스트 파일 생성 실시]

https://kkh0977.tistory.com/980

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


[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


[a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시]

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


[Web/JavaScript] 자바스크립트 AWS STS 사용 Long 형식 S3 파일 다운 GetPreSignedUrl 프리사인 URL 주소 생성

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

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8524

178. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS STS 사용 Long 형식 S3 파일 다운 GetPreSignedUrl 프리사인 UR

---