Tistory View

web/javascript

압축풀기 : Javascript로 Zip파일다루기

God Dangchy What should I do? 2020. 2. 19. 15:55

Zip파일내의 파일 압축 풀기

실제 파일을 압축을 풀려면 다음과 같이 한다.

zip.file( entryName ).async("base64").then( 
	function ( base64Text ) // 압축이 다 풀리면 실행되는 함수
	{ 
		// base64Text : 압축이 풀린 내용
	} 
); 

entryName은 zip파일내의 파일이름이며 결과가 base64형태로 나오게 된다.

 

jszip라이브러리는 성능을 위해(javascript의 꾸진 성능을 보완하려고) thread를 만들어 압축을 푼다. 압축이 다 풀어지면 지정한 함수가 수행되고, 압축을 푼 데이터가 파라미터로 넘어오게 된다. 이 파라미터가 어떤 형태를 갖게 할지는 aync함수의 parameter로 지정할 수가 있다.

우리는 브라우저를 사용하기 때문에 base64를 이용하는 것이 좀 편한 방법이다.

 

압축을 풀어서 <img>태그에 그림그리기

실제 웹브라우저에서 특별히 할 일은 그림을 표시하는 것외에는 딱히 쓸 일이 없다. 뭐 다른 작업도 할 수 있지만.. 필자 가 필요한 것은 사실상 이 것을 만들어 내는 것이었다.

 

 

현재 브라우저 메모리에 이미지가 있다면 다음과 같은 방식으로 이미지를 그려낼 수 가 있다.

var img = document.getElementById( 아이디 ); 
img.setAttribute( 'src', 'data:image/jpeg;base64, ' + base64Text ); 

이미지 태그에 base64로 인코딩된 이미지데이터를 지정하면 브라우저가 화면에 그려준다.

 

 

 

우리는 zip파일을 다루고 있으니, zip파일내의 특정 파일을 이미지태그에 그리는 함수를 만들도록 하자

function zip_setImageToImgTag( zip, entryName, imgId )
{ 

	zip.file( entryName ).async("base64").then( 
		function ( base64Text ) 
		{ 
			var img = document.getElementById( imgId ); 
			img.setAttribute( 'src', 'data:image/jpeg;base64, ' + base64Text ); 
		} 
	); 
}

이미지가 실제 jpeg가 아니어도 브라우저는 화면에 잘 그리기 때문에 그냥 jpeg로 지정을 했다. 일일이 분석해서 mime-type을 지정하기 귀찮았다..

 

압축을 풀어서 파일 다운로드

다음의 코드로 브라우저가 파일을 받게 할 수가 있다.

 

window.location="data:application/octastream;base64, " + base64Text;

이 방법의 문제는 파일이름을 지정할 방법이(몰라요).. 따라서 다음의 코드로 대체한다.

 

var element = document.createElement('a'); 
element.setAttribute('href', 'data:application/octetstream;base64,' + base64Text ); 
element.setAttribute('download', filename ); 
element.style.display = 'none'; 
document.body.appendChild(element); 
element.click(); 
document.body.removeChild(element);

 

순간적으로 a태그를 만들어 내용을 지정하고 click을 시뮬레이션해서 브라우저가 파일을 받게 한다.

여거서 다운로드될 파일명을 filename에 지정하면 된다.

 

 

zip파일에서 특정파일을 다운로드 받게하는 함수는 다음과 같다.

function zip_download_entry( zip, entryName, filename ) {
		
	zip.file( entryName ).async("base64").then(
		function ( base64Text )
		{
			//window.location="data:application/octastream;base64, " + base64Text;
											
			
			var element = document.createElement('a');
	            element.setAttribute('href', 'data:application/octastream;base64,' + base64Text );
	            element.setAttribute('download', filename );
	            element.style.display = 'none';
	            document.body.appendChild(element);
	            element.click();
	            document.body.removeChild(element);
					
		}
	);
}
	

 

 

Replies
Reply Write