고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
jQuery 파일압축/풀기 플러그인 JSZip
jQuery 를 이용하여 파일을 압축하거나, 압축파일을 열거나 할때 유용하게 사용할 수 있는 플러그인 입니다.
자료는 아래 링크에서 다운로드 받을 수 있습니다.
저의 경우는 zip 파일을 다운로드 받은후에, dist 폴더에 있는 jszip.js 또는 jszip.min.js 를 include 하여 사용했습니다.
기본적인 예제는 위 사이트에서 제공하는 것을 활용하시면 될듯 하구요.....
저의 경우는 서버에 있는 여러개의 파일을 Array 로 세팅한 후에, Zip 파일로 다운로드 하는 것을 구현해 봤습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./dist/jszip.js"></script>
<script type="text/javascript" src="./dist/jszip-utils.js"></script>
<script type="text/javascript" src="./dist/jszip-custom.js"></script>
<script type="text/javascript" src="./test/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./vendor/FileSaver.js"></script>
</head>
<body>
<script language = "javascript">
var arFileArray = new Array();
var sZipFileName = "example.zip";
arFileArray[0] = "./target_folder/001.png";
arFileArray[1] = "./target_folder/002.jpg";
arFileArray[2] = "./target_folder/003.html";
arFileArray[3] = "./target_folder/004.html";
</script>
<button id = "GetZipFileBtn" onclick="DownloadZipFile(arFileArray, sZipFileName)">zip파일 다운로드</button>
</body>
</html>
GetZipFileBtn 을 클릭하면 DownloadZipFile() 함수를 호출하게 되는데,
이때, 압축될 파일의 리스트를 Array 로 전달하고, 다운받을 압축파일명을 함께 전달하도록 코딩했습니다.
DownloadZipFile() 함수는 아래와 같이 별도의 js 파일로 만들어서 include 해서 사용했습니다.
<script type="text/javascript" src="./dist/jszip-custom.js"></script>
jszip-custom.js 파일의 내용은 다음과 같습니다.
function DownloadZipFile(arFileArray, sZipFileName)
{
var Promise = window.Promise;
if (!Promise) {
Promise = JSZip.external.Promise;
}
function urlToPromise(url) {
return new Promise(function(resolve, reject) {
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
reject(err);
} else {
resolve(data);
}
});
});
}
if(!JSZip.support.blob) {
showError("This demo works only with a recent browser !");
//return;
}
var zip = new JSZip();
for(var i = 0; i < arFileArray.length; i++)
{
var url = arFileArray[i];
var filename = url.replace(/.*\//g, "");
zip.file(filename, urlToPromise(url), {binary:true});
}
// when everything has been downloaded, we can trigger the dl
zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
})
.then(function callback(blob) {
// see FileSaver.js
saveAs(blob, sZipFileName);
}, function (e) {
showError(e);
});
}
위 코드는 아래 예제를 참고로 만들어봤습니다.
https://stuk.github.io/jszip/documentation/examples/downloader.html
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| jQuery Image Resize 이미지크기 실제로 변경하기 (0) | 2016.09.08 |
|---|---|
| javascript replace / replaceAll 문자열내 전체에서 대상문자변환, 문자열치환 (2) | 2016.09.08 |
| blueimp jQuery Fileupload 파일업로드 파일명 중복시에 덮어씌우기 (0) | 2016.08.30 |
| jQuery FileUpload Plugin 파일업로드시 업로드 위치 동적변경하기 (0) | 2016.08.30 |
| JavaScript 와 CSS 로 만든 PopUp 창 띄우기 (0) | 2016.08.25 |
댓글 영역