WEB/JavaScript

[JavaScript] 자바스크립트 파일 압축(zip, jszip 등등) 관련

AlrepondTech 2017. 11. 23. 11:22
반응형

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

출처: https://gs.saro.me/#!m=elec&jn=807

 

 

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/


예제
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>test js zip</title>
  6. <!-- 방금전 다운로드 받은 jszip.min.js 파일 -->
  7. <script async type="text/javascript" src="./jszip.min.js" charset="utf-8"></script>
  8. <script async type="text/javascript" charset="utf-8">
  9. function getZip()
  10. {
  11. var zip = new JSZip();
  12. zip.file("text1.txt", "Hello test 1");
  13. zip.file("text2.txt", "Hello text 2");
  14. zip.generateAsync({type:"base64"})
  15. .then(function(base64)
  16. {
  17. location.href="data:application/zip;base64," + base64;
  18. });
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <input type="button" value="다운로드" onclick="getZip();"/>
  24. </body>
  25. </html>
다만 이렇게 할경우 파일 이름을 지정할 수 없으니 FileSaver.js를 사용하라고 나옵니다.
- http://stuk.github.io/jszip/documentation/howto/write_zip.html


FileSaver.js
https://github.com/eligrey/FileSaver.js
FileSaver.min.js 를 다운받습니다.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>test js zip</title>
  6. <script async type="text/javascript" src="./jszip.min.js" charset="utf-8"></script>
  7. <script async type="text/javascript" src="./FileSaver.min.js" charset="utf-8"></script>
  8. <script async type="text/javascript" charset="utf-8">
  9. function getZip()
  10. {
  11. var zip = new JSZip();
  12. zip.file("text1.txt", "Hello test 1");
  13. zip.file("text2.txt", "Hello text 2");
  14. zip.generateAsync({type:"blob"})
  15. .then(function(blob)
  16. {
  17. saveAs(blob, "hello.zip");
  18. });
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <input type="button" value="다운로드" onclick="getZip();"/>
  24. </body>
  25. </html>
 

=================================

=================================

=================================

 

 

 

*기타 관련 링크:

- https://stuk.github.io/jszip/

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 현재 페이지 주소 얻기 관련  (0) 2017.11.23
[Javascript] 자바스크립트 cache 로드때 코드 갱신 쿠키삭제 캐시삭제 로드 브라우져 캐시 우회하기 관련  (0) 2017.11.23
[JavaScript] 자바스크립트 브라우저 터치 이벤트 (터치스크린, 모바일터치스키린 등등) 이벤트 관련  (0) 2017.11.22
[JavaScript] JavaScript 의 static 구현 관련  (0) 2017.11.08
[JavaScript] 자바스크립트 Array 관련  (0) 2017.11.07

'WEB/JavaScript'의 다른글

  • 현재글[JavaScript] 자바스크립트 파일 압축(zip, jszip 등등) 관련

관련글

티스토리툴바