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

이제 Zip파일을 만들어 보도록하자. 

 

새로운 Zip파일을 생성하기 위해 다음과 같이 빈 Instance를 하나 만든다.

var zip = new JSZip();

 

Zip Instance에 entry를 만들려면 다음과 같이 한다.

zip.file( "file.txt", base64data, {'base64':true});

"file.txt"는 Zip파일내부에서 사용할 파일이름이고 base64data는 이미 base64로 인코딩된 text다. base64를 이용하기 때문에 세번째 파라미터에 base64옵션을 켜주었다.

단순히 스트링데이터를 넣으려면 다음과 같이 할 수 있다.

zip.file( "file.txt", text );

 

현재 우리는 웹에서 사용을 해야 하기 때문에, 두가지를 고려할 수 있다.

첫번째는 사용자기 지정한 파일을 집어 넣는 것이고, 또 하나는 서버에 있는 데이터를 불러와서 집어넣는 것이다.

사용자가 지정한 파일 넣기

 

<form>
	<input id="file4upload" type="file" name="name" multiple onchange="myOnFileChanged(event);" />
	<input type="button" value="download" onclick="myOnDownload( event );"/>
</form>


function download_base64_content( filename, 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);
}


// 파일을 선택하면 zip 인스턴트에 넣는다.
function myOnFileChanged( evt )
{
	var files = document.getElementById('file4upload').files;
	
	for( var i = 0 ; i < files.length ; i++ )
	{
		var file = files[i];
		zip.file( file.name, file );
	}
}

// 다운로드 버튼을 눌렀을 때
function myOnDownload( evt ) {
	zip.generateAsync({ type: "base64", }).then(
		function( base64Text )
		{
			download_base64_content( 'filename.zip', base64Text );
		}
	);
}

여러개의 파일을 선택할 수 있도록 <input file .. >에 multiple을 넣어 두었다. 파일선택창에서 여러개의 파일을 선택할 수 있도록 만들었다.

[download]버튼을 누르면 파일을 다운받을 수 있다.

실제 압축은 generateAsync에서 수행이 되기 때문에(쓰레드에서), zip.file(...)함수는 그냥 압축할 목록을 만드는 과정에 불과하다.

 

필자의 시스템 메모리 16GiB에서 테스트를 한 결과 총 30MiB(메가)정도되는 파일을 올려 테스트를 해보니 브라우저가 4GiB(기가)까지 피크를 쳤으며, 100MiB에서는 브라우저가 처리를 포기했다. 실제 큰 용량을 사용할 수 없는 것이 현재 상황이다.

 

 

서버에서 끌어다가 넣기

jQuery의 Ajax를 사용하여 서버에서 파일을 가져와 담는 과정은 다음과 같다. jQuery를 쓰지 않는 다면.... 만들어 사용..해야 겠지만..

$.get("url/to.file.txt") // jQuery v3 returns promises
.then(function (content) {
    zip.file("file.txt", content);
})

 

압축율 지정하기

 

zip.file("a.png", contentOfA, {
    compression: "STORE" // 이 파일은 압축하지 않음
});
zip.file("b.txt", contentOfA, {
    compression: "DEFLATE",
    compressionOptions: {
        level: 9 // 이 파일은 최대 압축을 한다.
    }
});

// 압축률을 지정하지 않으면, generateAsync options에 따라 정해진다.
zip.file("c.txt", contentOfB);

// - a.png는 그냥 압축하지 않고 저장
// - b.txt는 최대 앞축
// - c.txt는 아래의 기본값을 사용 
zip.generateAsync({
    type: "blob",
    compression: "DEFLATE"
});

Zip파일은 파일마다 압축률을 따로 지정이 가능하고, 파일마다 comment도 지정이 가능하다. 위의 예제는 파일마다 따로 압축률을 지정하고 있으며, 지정하지 않는 것은 마지막[generateAsync]에 옵션에서 설정된 것으로 지정된다.

 

 

추가적인 옵션을 보려면 다음의 링크에서 확인해 볼 수 있다.

https://stuk.github.io/jszip/documentation/api_jszip/file_data.html

 

<< 간단한 웹서버 돌리기

목록

예제 Zip파일 풀기 >>