집 >웹 프론트엔드 >JS 튜토리얼 >Blod를 기반으로 한 Ajax 진행률 표시줄 다운로드 구현 샘플 코드

Blod를 기반으로 한 Ajax 진행률 표시줄 다운로드 구현 샘플 코드

亚连원래의: 2018-05-22 16:46:561971검색

이 글에서는 주로 Blod 기반의 Ajax 진행률 표시줄 다운로드 구현을 위한 샘플 코드를 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

일반적인 브라우저 다운로드

웹 개발에서는 다운로드 기능을 구현하고 싶다면 새로운 웹페이지를 사용하거나 iframe을 사용하는 경우가 많습니다. 구현은 실제로 매우 간단합니다.

<a target="_blank" href="download.zip" rel="external nofollow" >点击下载</a>
//或者
<iframe style="display:none" src="download.zip"></iframe>

사용자가 태그를 클릭하여 새 탭을 표시하거나 iframe을 연 후 브라우저는 다운로드 응답을 수락하고 첨부 파일을 다운로드합니다. 실제로 소위 첨부 파일 다운로드는 브라우저가 응답 메시지의 헤더를 읽은 후 브라우저가 다운로드 프롬프트 상자를 생성하고 사용자가 확인한 후에 파일을 계속 다운로드한다는 것을 의미합니다. 파일은 실제로 스트림입니다. 소위 스트림은 전송 프로세스입니다. 브라우저는 자동으로 이 전송 프로세스를 관리하고 진행률 표시줄, 다운로드 중지 버튼, 계속 버튼, 다운로드 취소 버튼, 다운로드한 바이트 번호 업데이트 표시 버튼 등을 자동으로 생성합니다. 등. . 브라우저는 자동으로 이 작업을 수행하며 전체 프로세스는 우리가 제어할 수 없습니다.

ajax download

브라우저의 다운로드 지원은 기본적으로 우리의 요구 사항을 충족할 수 있습니다. 일반적인 시나리오에서는 다른 다운로드 방법을 탐색하는 것이 거의 의미가 없습니다. 그러나 브라우저 다운로드가 충족할 수 없는 몇 가지 시나리오가 여전히 있습니다. 예를 들어 웹 애플리케이션이 다운로드 진행 상황을 모니터링해야 하거나 다운로드가 완료된 후 특정 이벤트를 트리거해야 하거나 웹 애플리케이션이 다운로드 프로세스를 자동으로 취소할 수 있습니다. 작업자를 사용하여 다운로드 등을 실행하는 배경을 만듭니다. 위의 상황에서는 Blod 객체 기반의 ajax 다운로드를 사용할 수 있습니다.

Ajax 다운로드 첨부 파일은 ajax 업로드 첨부 파일과 동일하며 브라우저는 ajax2.0을 지원해야 합니다. 실제로 소위 다운로드는 일반적인 ajax 요청과 다르지 않습니다. 그러나 다운로드는 일반적으로 텍스트 개체나 json 개체가 아닌 바이너리 파일입니다. 바이너리 파일입니다. 이것은 피입니다. 따라서 응답 유형과 responseType 값을 "blod"로 설정합니다.

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

에서는 XMLHttpRequest 객체의 responseType 필드 값이 blob이어야 합니다. 그렇다면 혈액 개체는 무엇입니까?

blod 개체

MDN은 이를 다음과 같이 설명합니다.

Blob 개체는 읽기 전용 원시 데이터를 포함하는 파일과 유사한 개체입니다. Blob 객체의 데이터는 반드시 JavaScript의 기본 형식일 필요는 없습니다. 파일 인터페이스는 Blob을 기반으로 하며 Blob의 기능을 상속하고 사용자 컴퓨터의 로컬 파일에 대한 지원을 확장합니다. Blob 객체를 통해 바이너리 스트림을 객체로 캡슐화할 수 있습니다.

HTML5의 파일 관련 API를 알고 있다면 blod 객체에도 익숙할 것입니다. Blod는 바이트 스트림을 파일로 캡슐화할 수 있습니다. XMLHttpRequest 객체의 responseType 값이 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 개체를 저장하세요

브라우저 다운로드를 모방하고 태그 또는 iframe을 생성한 다음 URL을 생성하여 다운로드하기 위해 브라우저로 돌아가면 브라우저가 자동으로 첨부 파일 저장 창을 생성합니다. URL은 URL.createObjectURL(blob) 메소드를 사용하여 얻을 수 있습니다. URL.createObjectURL은 Blob 객체와 File 객체를 지원하며, 현재 사용자가 다운로드를 포함하여 이러한 객체에 액세스할 수 있도록 가상 URL을 생성할 수 있습니다. 서버에서 직접 다운로드하는 것과 달리 여기에서의 다운로드는 클라이언트 내부에서 이루어지며 네트워크 IO를 사용하지 않으므로 다운로드가 거의 즉각적으로 이루어집니다. 그러나 URL을 생성한 후에는 이를 해제해야 합니다. 그렇지 않으면 Blob 리소스가 가비지 수집되지 않습니다. URL.revokeObjectURL을 사용하여 URL을 해제하고 Blob 리소스를 해제할 수 있습니다. IE 브라우저의 경우 msSaveOrOpenBlob 및 msSaveBlob라는 두 가지 탐색기 메서드인 자체 Blob 개체 처리 전략 세트가 있습니다.

//ie的下载
if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, fileName);
} else {
  //非ie的下载
  var link = document.createElement(&#39;a&#39;);
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(link.href);
}

진행률 표시줄 및 다운로드 취소

그리고 진행률 표시줄 및 다운로드 취소 기능이 있습니다. 사실 XMLHttpRequest 개체에는 진행률 이벤트가 있지만 일반적으로 Ajax 요청을 할 때 이를 무시합니다. 즉각적입니다. 진행률 표시줄을 설정할 필요가 없습니다. 그러나 Ajax 다운로드는 다릅니다. 첨부 파일을 다운로드하는 데는 시간이 걸리므로 진행률 이벤트를 수신하여 다운로드 진행률을 확인할 수 있는 진행률 표시줄을 개발해야 합니다.

다운로드를 취소하려면 XMLHttpRequest 객체의 abort 기능을 사용하세요. 또한, 로드 이벤트는 다운로드 완료를 모니터링할 수 있고, 오류 이벤트는 다운로드 실패를 모니터링할 수 있습니다. 즉, Ajax 다운로드와 일반 Ajax 요청의 이벤트 및 방법은 완전히 동일합니다.

성능 최적화 및 동일 원본 정책

Ajax 다운로드는 긴 연결과 마찬가지로 일반 요청, 특히 더 많은 대역폭을 차지하는 다운로드보다 더 많은 대역폭을 차지합니다. 따라서 다운로드 과정에서 다른 ajax 요청이 차단될 수 있으므로 ajax에서 다운로드한 리소스와 기타 요청된 리소스는 서로 다른 도메인 이름을 사용하는 것이 좋지만 이로 인해 동일한 원본 정책 문제라는 새로운 문제가 발생하게 됩니다.

동일 출처 정책은 브라우저 보안의 초석입니다. 동일 출처 정책이 없으면 모든 웹사이트가 CSRF 공격을 시작할 수 있습니다. 다운로드한 리소스의 URL이 현재 페이지의 URL과 동일한 출처를 갖는다는 것을 보장할 수 없는 경우 동일한 출처 정책이 실행되어 다운로드가 실패하게 됩니다. 따라서 Ajax 크로스 도메인 처리가 필요합니다. iframe 및 새 탭의 다운로드 방법과 비교할 때(실제로 iframe에도 동일 출처 정책이 있어 iframe의 페이지와 상위 페이지가 서로의 콘텐츠에 액세스할 수 없도록 요구하지만 다운로드 기능에는 이러한 종류가 포함되지 않습니다. 따라서 iframe 다운로드는 동일한 출처 정책의 영향을 받지 않습니다), ajax 다운로드는 여전히 본질적으로 ajax이므로 브라우저의 동일한 출처 정책의 영향을 받습니다. 따라서 원본이 아닌 소스에서 첨부 파일을 다운로드하는 경우 첨부 파일이 있는 서버는 cors를 지원해야 합니다. 서버가 쿠키에 액세스해야 하는 경우 XMLHttpRequest 개체의 withCredentials를 true로 설정해야 합니다.

동시에 동일한 출처 정책으로 인해 Ajax를 사용하여 타사 리소스를 다운로드할 수 없습니다. 왜냐하면 일반적인 다운로드 서비스에서는 Cors 처리를 수행하지 않기 때문입니다. 결국 iframe 다운로드나 새 탭 다운로드는 그렇지 않습니다. 동일 원본 정책의 영향을 받기 때문에 Cors 처리를 할 필요가 없습니다. 이는 Ajax 다운로드의 적용 가능성을 크게 제한합니다.

요약:

마지막으로 ajax 다운로드의 사용 시나리오를 요약해 보겠습니다.

1. 사용자의 다운로드 진행 속도가 너무 느리다는 것을 발견하는 등 다운로드 진행 상황을 모니터링하고 다른 솔루션을 적극적으로 제공해야 하는 시나리오.

2. 다운로드가 완료된 후 데스크톱 알림 팝업과 같은 특정 이벤트를 트리거해야 합니다.

3. 백그라운드 다운로드가 필요합니다. 예를 들어, 사용자가 웹 페이지를 열고 캐시한 후 비밀리에 첨부 파일을 다운로드한 다음 사용자가 실제로 첨부 파일을 다운로드하고 싶을 때 로컬에 저장할 수 있습니다. 다운로드 프로세스가 페이지의 일반적인 렌더링에 영향을 미치지 않도록 작업자를 사용하여 백그라운드 스레드를 생성할 수도 있습니다.

4. 하드디스크에 저장하지 않고 다운로드 받아야 하는데, 웹앱에서 첨부파일을 직접 처리합니다. 예를 들어 pdf.js는 ajax를 사용하여 다운로드합니다.

마지막으로 작성자의 ajax 다운로드 데모를 소개합니다: ajaxDownloadDemo_jb51.rar

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Blod를 기반으로 한 Ajax 진행률 표시줄 다운로드 구현 샘플 코드

관련 기사