Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Spring Framework
- spring reactive
- reactor
- 서버운영
- 웹앱
- 공유기 서버
- 웹 커리큘럼
- reactive
- ipTIME
- 웹 스터디
- reactor core
- Spring Batch
Archives
- Today
- Total
Hello World
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/
예제다만 이렇게 할경우 파일 이름을 지정할 수 없으니 FileSaver.js를 사용하라고 나옵니다.
- <!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>
- 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>
출처: https://gs.saro.me/#!m=elec&jn=807
반응형
'jQuery > PlugIn' 카테고리의 다른 글
jQuery Ui Class (0) | 2012.12.13 |
---|
Comments