Blod 기반 ajax 진도 바 다운로드 구현 예제 코드

일반 브 라 우 저 다운로드
웹 개발 에서 다운로드 기능 을 실현 하려 면 웹 페이지 를 새로 열거 나 iframe 을 사용 하 는 경우 가 많다.실현 하기는 사실 매우 간단 하 다.

<a target="_blank" href="download.zip" rel="external nofollow" >    </a>
//  
<iframe style="display:none" src="download.zip"></iframe>

사용자 가 a 탭 을 누 르 면 새 페이지 의 서명 을 팝 업 하거나 iframe 을 열 면 브 라 우 저 는 다운로드 응답 을 받 고 첨부 파일 을 다운로드 합 니 다.첨부 파일 다운로드 란 브 라 우 저가 응답 메시지 의 머리 를 읽 은 후에 브 라 우 저 는 다운로드 알림 상 자 를 생 성하 여 사용자 가 확인 한 후에 파일 을 계속 다운로드 하 는 것 입 니 다.파일 은 스 트림 입 니 다.스 트림 이란 전송 과정 입 니 다.브 라 우 저 는 이 전송 과정 을 자동 으로 관리 합 니 다.진 도 를 자동 으로 생 성 하고 다운로드 중단 버튼,계속 버튼,다운로드 취소 버튼,업데이트 다운로드 바이트 버튼 등 을 표시 합 니 다.이것들 은 모두 브 라 우 저가 자동 으로 우 리 를 위해 만 든 것 으로 전체 과정 이 우리 의 통 제 를 받 지 않 는 다.

ajax 다운로드
브 라 우 저가 다운로드 에 대한 지원 은 기본적으로 우리 의 수 요 를 만족 시 킬 수 있 고 일반적인 장면 에서 다른 다운로드 방식 을 탐색 하 는 것 은 의미 가 크 지 않다.그러나 일부 장면 은 브 라 우 저 다운로드 가 만족 하지 못 합 니 다.예 를 들 어 웹 애플 리 케 이 션 이 다운로드 진 도 를 모니터링 하 라 고 요구 하거나 다운로드 가 완 료 된 후에 특정 사건 을 촉발 하거나 웹 애플 리 케 이 션 이 다운로드 과정 을 자동 으로 취소 하거나 워 커 로 배경 에서 실행 되 는 다운 로드 를 만 드 는 등 입 니 다.상기 상황 에 대해 우 리 는 Blod 대상 을 바탕 으로 하 는 ajax 로 다운로드 할 수 있 습 니 다.
ajax 다운로드 첨부 파일 은 ajax 업로드 첨부 파일 과 마찬가지 로 브 라 우 저가 ajax 2.0 을 지원 해 야 합 니 다.사실 다운로드 란 일반적인 ajax 요청 과 다 를 바 가 없습니다.url 주 소 를 요청 하지만 다운 로드 는 보통 바 이 너 리 파일 입 니 다.텍스트 대상 이나 json 대상 이 아 닙 니 다.자바 스 크 립 트 가 이 바 이 너 리 파일 을 봉인 할 수 있 는 형식 을 제공 해 야 합 니 다.이것 은 blod 입 니 다.따라서 응답 하 는 형식 response Type 의 값 을"blod"로 설정 합 니 다.

var xhr =new XMLHttpRequest();
xhr.open(option.type ? option.type.toUpperCase() : 'GET', url, true);
xhr.responseType = 'blob';

XML HttpRequest 대상 을 요구 하 는 response Type 필드 값 은blob입 니 다.그럼 블 로그 대상 은 또 뭐 예요?
blod 대상
MDN 설명:
Blob 대상 은 원본 데이터 만 읽 는 클래스 파일 대상 입 니 다.Blob 대상 의 데 이 터 는 반드시 JavaScript 의 네 이 티 브 형식 이 어야 하 는 것 은 아 닙 니 다.File 인 터 페 이 스 는 Blob 를 기반 으로 Blob 의 기능 을 계승 하고 사용자 컴퓨터 의 로 컬 파일 을 확장 합 니 다.Blob 대상 을 통 해 우 리 는 바 이 너 리 흐름 을 하나의 대상 으로 포장 할 수 있 습 니 다.
html 5 의 file 과 관련 된 api 를 알 고 있다 면 blod 대상 에 대해 낯 설 지 않 을 것 입 니 다.blod 는 하나의 바이트 흐름 을 파일 로 봉 할 수 있 습 니 다.XML HttpRequest 대상 의 response Type 값 은 blob 입 니 다.응답 체 를 blob 대상 으로 처리 할 수 있 습 니 다.

xhr.onload = function () {
  //            
  if (this.status >= 200 && this.status < 300) {
    var blob = new Blob([this.response], {type: this.response.type});
  }
}

ajax 를 사용 하여 파일 을 다운로드 한 다음 blob 대상 으로 파일 을 저장 하고 브 라 우 저 에 캐 시 합 니 다.그렇다면 어떻게 사용자 로 하여 금 파일 을 하드디스크 에 저장 하 게 합 니까?
blob 대상 을 하 드 디스크 에 저장 합 니 다.
브 라 우 저 다운 로드 를 본 떠 a 태그 나 iframe 을 만 들 고 url 을 만 들 수 있 습 니 다.그러면 브 라 우 저 다운로드 로 돌아 갑 니 다.브 라 우 저 는 첨부 파일 을 저장 하 는 창 을 자동 으로 생 성 합 니 다.url 은 URL.createObjectURL(blob)방법 으로 얻 을 수 있 습 니 다.URL.createObjectURL 은 Blob 대상 과 File 대상 을 지원 합 니 다.가상 url 을 생 성하 여 현재 사용자 가 이 대상 에 접근 할 수 있 도록 합 니 다.물론 다운로드 도 포함 합 니 다.서버 에서 직접 다운로드 하 는 것 과 달리 이곳 의 다운 로드 는 클 라 이언 트 내부 의 것 으로 네트워크 io 를 가지 않 기 때문에 다운 로드 는 거의 순간 적 이다.그러나 이 url 을 생 성 한 후에 방출 해 야 합 니 다.그렇지 않 으 면 blob 자원 은 쓰레기 로 회수 되 지 않 습 니 다.URL.revokeObject URL 을 사용 하면 이 url 을 방출 하여 blob 자원 을 방출 할 수 있 습 니 다.ie 브 라 우 저 에 대해 Blob 대상 처리 전략 이 있 습 니 다.바로 msSaveOrOpenBlob 와 msSaveBlob 두 개의 navigator 방법 입 니 다.

//ie   
if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, fileName);
} else {
  // ie   
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(link.href);
}

진행 항목 및 다운로드 취소
그 다음 에 진도 바 와 다운로드 취소 기능 이 있 습 니 다.사실 XML HttpRequest 대상 은 progress 이벤트 가 있 습 니 다.다만 우 리 는 평소에 ajax 요청 을 할 때 그 를 무시 합 니 다.일반적인 요청 은 순간 적 인 것 이기 때문에 진도 바 를 설정 할 필요 가 없습니다.그러나 ajax 다운로드 가 다 릅 니 다.첨부 파일 을 다운로드 하 는 데 시간 이 필요 하기 때문에 진도 항목 을 개발 하 는 것 이 필요 합 니 다.progress 사건 을 감청 하면 다운로드 진 도 를 얻 을 수 있 습 니 다.
XML HttpRequest 대상 의 abort 함 수 를 사용 하면 다운 로드 를 취소 할 수 있 으 며,load 이 벤트 는 다운로드 가 완료 되 었 음 을 감청 할 수 있 으 며,error 이 벤트 는 다운로드 실 패 를 감청 할 수 있 습 니 다.한 마디 로 하면 ajax 다운로드 와 일반적인 ajax 가 요청 한 이벤트 와 방법 은 똑 같 습 니 다.
성능 최적화 와 동원 전략
ajax 다운 로드 는 긴 연결 과 마찬가지 로 일반 요청 보다 대역 폭 을 더 많이 차지 합 니 다.특히 다운로드 가 대역 폭 을 더 많이 차지 합 니 다.따라서 다운로드 과정 에서 다른 ajax 요청 을 막 을 수 있 으 므 로 ajax 가 다운로드 한 자원 과 다른 요청 한 자원 은 서로 다른 도 메 인 이름 을 사용 하 는 것 을 권장 합 니 다.그러나 이렇게 하면 새로운 문제 인 동원 정책 문 제 를 가 져 올 수 있 습 니 다.
같은 소스 정책 은 브 라 우 저 보안 의 초석 입 니 다.같은 소스 정책 이 없 으 면 모든 사이트 에서 csrf 공격 을 할 수 있 습 니 다.다운로드 한 자원 의 url 과 현재 페이지 의 url 이 같은 소스 임 을 보장 하지 못 하면 같은 소스 정책 을 실행 하여 다운로드 에 실 패 했 기 때문에 ajax 크로스 도 메 인 처 리 를 해 야 합 니 다.iframe 과 새 페이지 의 다운로드 방법 에 비해(사실 iframe 도 같은 소스 정책 이 있 습 니 다.iframe 안의 페이지 와 부모 페이지 가 상대방 의 내용 에 접근 할 수 없 도록 요구 하지만 다운로드 기능 은 이러한 방문 대상 의 내용 조작 과 관련 되 지 않 기 때문에 iframe 다운 로드 는 같은 소스 정책 의 영향 을 받 지 않 습 니 다)ajax 다운 로드 는 본질 적 으로 ajax 이기 때문에 브 라 우 저 동원 정책 의 영향 을 받 을 수 있 습 니 다.따라서 원본 이 아 닌 첨부 파일 을 다운로드 하려 면 첨부 파일 이 있 는 서버 지원 cors 가 필요 하 며,서버 가 쿠키 에 접근 하려 면 XML HttpRequest 대상 의 withCredentials 를 true 로 설정 해 야 합 니 다.
또한 같은 소스 정책 의 이유 로 저 희 는 ajax 형식 으로 제3자 자원 을 다운로드 할 수 없습니다.일반적인 다운로드 서 비 스 는 cors 처 리 를 하지 않 기 때문에 최종 iframe 다운로드 나 새 페이지 서명 다운로드 방식 보다 같은 소스 정책 의 영향 을 받 지 않 기 때문에 cors 처 리 를 할 필요 가 없습니다.이것 은 ajax 다운로드 의 적용 도 를 크게 제한 하 였 다.
요약:
마지막 으로 ajax 다운로드 의 사용 장면 을 다시 한 번 정리 해 보 겠 습 니 다.
1.다운로드 진 도 를 모니터링 하 는 장면 이 필요 하 다.예 를 들 어 사용자 가 다운로드 진도 가 너무 느 린 것 을 발견 하고 다른 해결 방안 을 자발적으로 제공 해 야 한다.
2.다운로드 가 완료 되면 특정 이벤트 가 발생 합 니 다.예 를 들 어 데스크 톱 알림 알림 알림 이 팝 업 됩 니 다.
3.백 스테이지 다운 로드 를 제공 해 야 합 니 다.예 를 들 어 우 리 는 사용자 가 웹 페이지 를 열 고 첨부 파일 을 몰래 다운로드 한 후에 캐 시 할 수 있 으 며,사용자 가 정말 첨부 파일 을 다운로드 하고 싶 을 때 직접 로 컬 에 저장 할 수 있다.우 리 는 심지어 worker 를 통 해 배경 스 레 드 를 만 들 수 있 고 다운로드 과정 이 페이지 의 정상 적 인 렌 더 링 에 영향 을 주지 않도록 보장 할 수 있 습 니 다.
4.다운로드 후 하 드 디스크 에 저장 하지 않 고 웹 앱 에서 첨부 파일 을 직접 처리 해 야 합 니 다.예 를 들 어 pdf.js 는 ajax 다운로드 입 니 다.
마지막 으로 필자 의 ajax 다운로드 demo:ajaxDownloadDemo_jb51.rar를 드 립 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.