원본 본문으로 이동하기

JSZip + FileSaver : 자바스크립트 파일 압축 다운로드 도구

박용서 - 얼마전 Hibernate Tools 을 통해서 쿼리 -> Domain 변환에 대해서 설명했습니다. https://gs.saro.me/#!m=elec&jn=805 하지만 결과가 별로 마음에 들지 않았습니다. 직접 쿼리문을 domain과 리포지토리로 바꿔 줄 수 있는 것을 생각하던 중 자바스크립트로 처리해서 zip으로 내려받으면 어떨까 싶어서 찾아보던중 js zip 이라는 것을 알게되었습니다. JSZip 아래사이트에서 download JSZip 을 눌러 다운로드받습니다. dist -> jszip.js http://stuk.github.io/jszip/ 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test js zip</title> <!-- 방금전 다운로드 받은 jszip.min.js 파일 --> <script async type="text/javascript" src="./jszip.min.js" charset="utf-8"></script> <script async type="text/javascript" charset="utf-8"> function getZip() { var zip = new JSZip(); zip.file("text1.txt", "Hello test 1"); zip.file("text2.txt", "Hello text 2"); zip.generateAsync({type:"base64"}) .then(function(base64) { location.href="data:application/zip;base64," + base64; }); } </script> </head> <body> <input type="button" value="다운로드" onclick="getZip();"/> </body> </html> 다만 이렇게 할경우 파일 이름을 지정할 수 없으니 FileSaver.js를 사용하라고 나옵니다. - http://stuk.github.io/jszip/documentation/howto/write_zip.html FileSaver.js https://github.com/eligrey/FileSaver.js FileSaver.min.js 를 다운받습니다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test js zip</title> <script async type="text/javascript" src="./jszip.min.js" charset="utf-8"></script> <script async type="text/javascript" src="./FileSaver.min.js" charset="utf-8"></script> <script async type="text/javascript" charset="utf-8"> function getZip() { var zip = new JSZip(); zip.file("text1.txt", "Hello test 1"); zip.file("text2.txt", "Hello text 2"); zip.generateAsync({type:"blob"}) .then(function(blob) { saveAs(blob, "hello.zip"); }); } </script> </head> <body> <input type="button" value="다운로드" onclick="getZip();"/> </body> </html> - 자바스크립트