JavaScript 다중 파일 다운로드 방법 확인

파일의 다운로드는 매우 흔히 볼 수 있는 화제라고 할 수 있다. 앞부분의 많은 프로젝트에서 이러한 수요가 있을 것이다. 예를 들어 하이차트 통계도 내보내기, 온라인 사진 편집 중의 사진 저장, 온라인 코드 편집 코드 내보내기 등이다.많은 경우에 우리는 하나의 링크만 주었다. 사용자는 오른쪽 단추를 눌러서 링크를 클릭한 다음'다른 이름으로 저장'을 선택해야 한다. 이 과정은 번거롭지 않지만 두 가지 작업이 필요하다. 만약에 사용자가 페이지에 있는 여러 개의 링크 파일을 저장하려면 여러 번 반복해서 조작해야 한다. 가장 흔히 볼 수 있는 것은 영어 듣기 사이트의 오디오 다운로드이다. 손이 저리다!
본고의 목적은 자바스크립트를 이용하여 여러 파일을 다운로드하는 방법을 소개하는 것이다. 즉, 사용자가 어떤 링크나 단추를 눌렀을 때 여러 파일을 동시에 다운로드하는 것이다.여기서'동시'는 정확하지 않아서 현대 브라우저에서 여러 파일의 병행 다운로드를 실현할 수 있다. 그러나 일부 오래된 버전의 브라우저, 예를 들어 IE8-와 같은 브라우저는 한 파일만 다운로드할 수 있지만 여러 파일을 순서대로 저장할 수 있으니 직렬 다운로드라고 할 수 있다.
디테일을 무시하려면 세 번째 부분으로 넘어가거나 스탬프를 찍을 수 있습니다.
코드 패키지: lib.js
DEMO: javascript-multiple-download(HTTPS, 세 번째 버그, 구체적인 원인은 다음과 같습니다)
javascript-multiple-download(HTTP, 정상 테스트)
1. 파일 유형 소개 및 특징
1. 일반 유형
평소에 비교적 흔히 볼 수 있는 것은 txt, png, jpg, zip, tar 등 각종 파일 형식이다. 이런 파일 형식 중 일부 브라우저는 링크를 열어 내용을 표시하고 다른 일부는 브라우저가 응답 헤더를 식별하지 못하거나 대응하는 형식을 해석할 수 없기 때문에 파일을 직접 다운로드했다.예:

<a href="http://barretlee.com/test.rar" rel="external nofollow" >file</a>

이 코드는 링크를 직접 누르면 브라우저에서 파일을 다운로드합니다.
2. dataURL 유형
데이터 URL도 매우 흔히 볼 수 있는 유형으로 그는 src나 url()의 매개 변수로 보낼 수 있다.비교적 흔히 볼 수 있는 것은 다음과 같다.

 ： data:text/plain; 。
 ： data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....
  data:image/png;base64,/9j/4AAQSkZJRgABAQEA....

base64는 비교적 광범위한 데이터 형식을 사용한다.

Base64 
data:[][;charset=][;base64],

Base64  CSS ：
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64  HTML ：
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />  

3. Blob 흐름
Blob 객체는 변경할 수 없는 원본 데이터가 포함된 클래스 파일 객체를 나타냅니다.자세한 내용은 DN 문서 을 참조하십시오.
그의 사용도 특히 편리하다. 예를 들어

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

Blob는 두 개의 매개 변수를 수신하는데 하나는 수조 유형의 데이터 대상이다. 그는 ArrayBuffer, ArrayBufferView, Blob, String 등 여러 가지 유형이 될 수 있다.두 번째 매개변수는 MINE 유형 설정입니다.본고에서 우리가 사용하고자 하는 것은 URLcreateObjectURL () 함수이다. 그의 역할은 하나의 URL이 대표하는 내용을 하나DOMString로 바꾸는 것이다. 결과적으로 하나의 파일 대상이나 Blob 대상이다.
4. 2진 흐름
우리가 File API를 이용하여 파일을 읽을 때 얻은 것은 데이터의 2진 흐름 형식이다. 이런 유형은 ArrayBuffer 등에서 직접 수신할 수 있기 때문에 본고에서 사용하지 않았으니 자세히 말하지 않겠다.
둘째, JavaScript 다중 파일 다운로드
HTML5에 a탭에 속성이 하나 더 있습니다. 다운로드. 사용자가 링크 브라우저를 누르면 이 링크의 내용을 열고 표시합니다. 링크에 다운로드 속성을 추가하면 이 링크를 누르면 이 파일을 열지 않고 바로 다운로드합니다.비록 비교적 사용하기 쉽지만, 저버전 브라우저는 호환되지 않습니다. 이것은 이 절의 2와 3에서 해결 방안을 설명할 것입니다.
여기서 우리는 속성 검사 UA를 이용하여 브라우저 유형을 판단할 수 있다.

h5Down = document.createElement("a").hasOwnProperty("download");
var h5Down = !/Trident|MSIE/.test(navigator.userAgent); // Trident   IE11

1. a 태그 다운로드 속성 사용
참고: FF5.0/Safari5.0/Opera11.1/IE9.0은 다운로드 속성을 지원하지 않습니다.
다운로드 속성을 이용하여 단일 파일을 직접 다운로드할 수 있습니다. 한 번에 여러 개의 파일을 다운로드하려면 조금 더 처리해야 합니다.

function downloadFile(fileName, content){
 var aLink = document.createElement("a"),
  evt = document.createEvent("HTMLEvents");

 evt.initEvent("click");
 aLink.download = fileName;
 aLink.href = content;

 aLink.dispatchEvent(evt);
}

다운로드 속성의 역할은 브라우저에서 파일의 MIME 형식을 무시하게 하는 것 외에 이 속성의 값을 파일 이름으로 합니다.Chrome 콘솔에서 이 프로그램을 실행할 수 있습니다.

downloadFile("barretlee.html", "./");

브라우저는 이 html 파일을 보존(다운로드)할지 여부를 알려 줍니다.앞서 언급한 파일 형식은 데이터 URL이나 Blob 흐름일 수도 있습니다. 프로그램도 이러한 데이터 형식을 지원하기 위해 위의 함수를 살짝 수정합니다.

function downloadFile(fileName, content){
 var aLink = document.createElement('a');
  , blob = new Blob([content])
  , evt = document.createEvent("HTMLEvents");

 evt.initEvent("click");

 aLink.download = fileName;
 aLink.href = URL.createObjectURL(blob);
 aLink.dispatchEvent(evt);
}

new Blob([content]), 파일을 하나의 Blog 흐름으로 변환한 다음 URL을 사용합니다.createObjectURL()은 DOMString으로 변환합니다.이렇게 해서 데이터 64와 다른 데이터 형식의 콘텐츠를 지원합니다.
2. window.open 이후 execCommand("SaveAs")
위에서 언급한 바와 같이 다운로드 속성은 매우 편리한 H5리기임에도 불구하고 낮은 버전의 IE는 전혀 얼굴을 내밀지 않는다. 방법을 말하자면 IE는 여러 가지 방식으로 전환할 수 있다. 예를 들어 ADOBE이다.STREAM의 activeX 객체는 파일을 파일 흐름으로 변환하여 저장할 파일에 쓸 수 있습니다.여기서 말하고자 하는 것은 약간 편리한 방식이다. 먼저 내용을 새로 열린 윈도우 대상에 쓴 다음에 execCommand를 이용하여 저장 명령을 실행하면 우리가 페이지에서 Ctrl+S를 누르면 페이지 안의 정보가 다운되는 것과 같다.

//   window  ， 。
var win = window.open("path/to/file.ext", "new Window", "width=0,height=0");
//   win   ctrl+s  
win.document.execCommand("SaveAs", true, "filename.ext");
//  ， 
win.close();

이 과정은 십분 분명하다. 그러나 여기에 문제가 존재한다. 프로그램의 문제가 아니라 브라우저의 문제이다. 만약에 우리가 수색개 브라우저나 360 브라우저로 새로운 창을 열면 그는 탭을 새로 열 것이다. 새로운 창을 열 것이 아니라 일부 브라우저가 윈도우를 차단할 것이다.열린 창 (이것은 설정할 수 있습니다).그래서 다른 방법을 찾을 수밖에 없었어요.
3. iframe에서 작업
기왕 새로 창문을 여는 것이 그렇게 번거로우니, 나는 이 창문 아래에서 일을 끝낼 것이다~

function IEdownloadFile(fileName, contentOrPath){
 var ifr = document.createElement('iframe');

 ifr.style.display = 'none';
 ifr.src = contentOrPath;

 document.body.appendChild(ifr);


 //   ->  
 ifr.contentWindow.document.execCommand('SaveAs', false, fileName);
 document.body.removeChild(ifr);
}

일반적인 링크는 iframe에 src 속성을 직접 추가한 다음saveAs 명령을 실행할 수 있습니다. 만약에 우리가 데이터 64 인코딩된 파일을 사용한다면 이것은 어떻게 합니까?

var isImg = contentOrPath.slice(0, 10) === "data:image"；

// dataURL  
isImg && ifr.contentWindow.document.write("<img src='" + 
  contentOrPath + "' />");

이것도 처리하기 쉬우므로 파일을 iframe에 직접 쓰고 저장합니다.
3. 코드의 봉인과 인터페이스 소개
1. 코드의 봉인 및 관련 DEMO
포장: lib.js
DEMO: javascript-multiple-download(HTTPS, 세 번째 버그)
javascript-multiple-download(HTTP, 정상 테스트)
Bug 설명, 디테일한 처리를 거친 후, 기본적으로 각 브라우저를 호환하고, 나는 코드를https://raw.github.com위의 관리, https 전송이기 때문에 세 번째 테스트에서 오류가 발생했습니다. 오류의 구체적인 내용은 HTTPS가 안전하게http://rawgithub.com/barretlee/javascript-multiple-download/master/file/test.jpg의 위협, 그리고 테스트.txt 파일에 오류가 없습니다.http 프로토콜에 넣고 테스트 실행 결과는 굉장합니다.(이점은 내가 깊이 연구하지 않은 것은 틀림없이 심층적인 안전 방면의 원인이 있을 것이다. 설마 그가 jpg 사진 형식이기 때문일까?
2. 인터페이스 호출
단일 파일 다운로드, 다중 파일 다운로드, 다중 파일 다운로드 사용자 정의 이름을 지원하는 세 개의 인터페이스를 제공합니다.
1) 단일 파일 다운로드

Downer("./file/test.txt");

2) 다중 파일 다운로드

Downer(["./file/test.txt","./file/test.txt"]);

3) 다중 파일 다운로드 사용자 정의 이름

Downer({
 "1.txt":"./file/test.txt",
 "2.jpg":"./file/test.jpg"
}); 

파일의 URL은./file/test.jpg는 다음과 같이 base64 또는 다른 형식으로 변경할 수 있습니다.

Downer({
  //  dataURI， text-indent ， 
 "data64.jpg" : "data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAYADsDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9NgKKK8w8beO/EMVzGdJ08W2jW2t2WnXGpLdx+e7PPEkii3eJgYj5mwsJFkzkquAC3VFc0lFf10/UOlz1CivO9H+LEmreP7jw8mlBrLfPDa6nC1y0cksX30Z2t1hGCHBEcsjAqQVHOJPCfjnxFc+HNU1rxPpmh6Vp9mt232i01WWXmGV0IdXt0CrhD8+45xnaM4A00uZ9rgtZcq3vb5noFLXCfDz4j3vjbT9XM+hSabqdhtItWFxGswZCybTc28DjJDAkx7fRjzi/qmv6zH8LdR1m6sP+Ef12PSprprPzkufssyxMwXeBtfBA5xg0OLi2n/Vwh+8aUep1gFLXGeKhqmj+FtGmt9fvvtVvfWMc9w0VsWvUkuI43WUeVtAIcnMYQggYI6Hs6lqwk7pPuNrkPEHwn8N+KNRkvdQh1BpZJY7ho7fVru3haWPbslMUcqpvXYhD7d2VU54FFFNNxd1uPyJIfhb4dt/EkOuxwXy6hBNJPD/xNLryImkz5myHzPLUNkllC4J5IyAaWP4W+GY7+/uzp7yy3sc8UiTXc0kUazHdMIo2cpDvPLeWFyeTRRRd9wH6B8NNB8NyapJZx38kmpxrFePe6pdXbTKAQMmaRjkAkZHOMDOAKmbwLp9n8Pp/CGkr/Zmm/wBnyadbjLS+QjIUB+ZstjPdsn1oopOTfUa91prdf1+hFrfhnWNb0HSLCTVrGOaC6tbi+mXT323CwyrJtiXzv3RZkXljJgZ4PWuooopNtkpWVkf/2Q==" 
});

여기는 크롬 호환성만 할 수 있습니다. IE는 보기 귀찮습니다. 이 수요는 매우 드물습니다!
4. 서버 지원과 백엔드 구현
1. 백엔드 구현
프런트엔드를 사용하지 않고 직접 백엔드에서 이루어지는 원리는 응답 헤더에 특수한 표시를 넣는 것이다. 예를 들어 프런트엔드에서 이런 요청을 보내는 것이다.

function download(path) {
 var ifrm = document.getElementById(frame);
 ifrm.src = "download.php?path="+path;
}

백엔드의 응답은 다음과 같습니다.

<?php 
 header("Content-Type: application/octet-stream");
 header("Content-Disposition: attachment; filename=".$_GET['path']);
 readfile($_GET['path']);
?>

브라우저에 이것은 흐르는 파일입니다. 첨부 파일로 보내려면 MINE type을 무시하고 저장하십시오.
2. 서버 구성
백그라운드가 apche인 경우 htaccess 파일을 설정할 수 있습니다.

<filesmatch "\.(zip|rar)$"="">
Header set Content-Disposition attachment
</filesmatch>

zip나rar 형식의 파일을 요청하면 Content-Disposition:attachment 응답 헤더를 추가합니다.이렇게 하면 php 코드에서 번거로운 조작을 생략할 수 있다.
다섯, 작은 매듭
문장이 급박하기 때문에 문장에 많은 오류가 있을 수 있습니다. 다중 파일 다운로드에 대해 더 좋은 제의가 있습니다. 함께 공유하기를 바랍니다!
다중 파일 다운로드를 실현하는 방식은 위에서 언급한 몇 가지가 아닐 것이다. 게다가 내가 여기에 봉인한 코드는 FFsafariopera에서 실현되지 않았다. 왜냐하면 그들은 다운로드 속성을 호환하지 않았기 때문에 구체적인 상황은 볼 수 있다caniuse.프로젝트에서 이런 일을 백엔드에 맡기면 몇 마디 코드로 해결할 수 있다고 건의합니다.
6. 참고자료
브라우저에서 JS로 파일 생성 및 다운로드 AlloyTeam
Starting file download with Javascript Ahzaz's Blog
Blob 흐름 MDN
자바스크립트의 다중 파일 다운로드 방법 해석에 관한 이 글을 소개합니다. 자바스크립트 다중 파일 다운로드에 관한 더 많은 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!