이번에는 전 게시글의 응용판? 이라고 해야하나....?
어쨋든! 우리는 각각의 파일들을 다운로드 해보았다. 그런데 생각보다 귀찮음?을 느꼇을 것이다.
파일을 각각 다운 받아야 한다는 현실때문에! 그래 파일 두개야 뭐 그렇다 치지... 하지만, 개발자도 사용자도 게으름뱅이이다.
자 결국, 우리가 해야 하는 것은 파일을 한 번에 둘다! 다운 받는 것이다. 물론, 클릭 한번에 여러개의 함수를 엮어서 다운받게 하면 되지만!
크롬에서 자주 봤듯이, 여러개의 파일을 다운로드를 시도하면 <- 여러개의 파일을 다운로드 합니다. 허용 합니까? 하고 물어보는 것을 볼 수 있다.
게다가 다운로드 한 파일들을 찾기도 귀찮다는 것.
자 해결책을 제시해보자면,
https://github.com/Stuk/jszip
클라이언트 단에서 파일을 zip파일로 압축을 할 수가 있다!
필요한 작업은 아래와 같다.
0. 데이터 준비
1. BLOB(binary large object)를 만든다.
2. Blob을 URL.createObjectURL을 사용하여, 해당 binary의 주소를 생성.
3. 다운로드가 필요한 파일들을 Zip 객체에 셋팅!
4. a태그를 이용하여, 해당 url 셋팅 하고, 다운로드.
전 게시물과 별로 달라진게 없네...
자 그럼 샘플! 샘플을 보자!
http://embed.plnkr.co/NMprnRxqYG0fkHa2J55D/
자 그러면, 전 게시물과의 차이점을 보자.
저기 보면 downloadAll이라는 함수가 생겼다!
jsZip은 blob을 데이터로 받기 때문에, util.saveAs에서 getBlob이 빠져 나온것을 확인 할 수 있다.
downloadAll을 좀 설명 하자면, JSZIP의 객체를 만들고, 그 객체에 파일을 생성 하거나,
폴더를 생성해서 해당 객체에 파일을 넣을수가 있고, 마지막으로 JSZip객체를 Blob으로 생성 하면, 끝!
와 쉽다~ 사용방법이 너무 간단해서, 전 게시물이랑 별로 차이도 안나네... 어쨋든 끝.
어쨋든! 우리는 각각의 파일들을 다운로드 해보았다. 그런데 생각보다 귀찮음?을 느꼇을 것이다.
파일을 각각 다운 받아야 한다는 현실때문에! 그래 파일 두개야 뭐 그렇다 치지... 하지만, 개발자도 사용자도 게으름뱅이이다.
자 결국, 우리가 해야 하는 것은 파일을 한 번에 둘다! 다운 받는 것이다. 물론, 클릭 한번에 여러개의 함수를 엮어서 다운받게 하면 되지만!
크롬에서 자주 봤듯이, 여러개의 파일을 다운로드를 시도하면 <- 여러개의 파일을 다운로드 합니다. 허용 합니까? 하고 물어보는 것을 볼 수 있다.
게다가 다운로드 한 파일들을 찾기도 귀찮다는 것.
자 해결책을 제시해보자면,
클라이언트 단에서 파일을 zip파일로 압축을 할 수가 있다!
필요한 작업은 아래와 같다.
0. 데이터 준비
1. BLOB(binary large object)를 만든다.
2. Blob을 URL.createObjectURL을 사용하여, 해당 binary의 주소를 생성.
3. 다운로드가 필요한 파일들을 Zip 객체에 셋팅!
4. a태그를 이용하여, 해당 url 셋팅 하고, 다운로드.
전 게시물과 별로 달라진게 없네...
자 그럼 샘플! 샘플을 보자!
http://embed.plnkr.co/NMprnRxqYG0fkHa2J55D/
var util = {} function fixBinary(bin) { //binary to arrayBuffer var length = bin.length var buf = new ArrayBuffer(length) var arr = new Uint8Array(buf) for (var i = 0; i < length; i++) { arr[i] = bin.charCodeAt(i) } return buf } window.onload = function() { var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext("2d") ctx.font = "30px Comic Sans MS" ctx.fillStyle = "red" ctx.textAlign = "center" ctx.fillText("Hello World", canvas.width / 2, canvas.height / 2) /** * Save As function * * @request String data, String file name, String file type (default : text/plain;charset=UTF-8) * * support browser : chrome, firefox, opera , ie edge, ie 10+ * not support browser : safari * */ util.saveAs = (function() { var a; if (!document.getElementById("fileDownload")) { a = document.createElement("a") a.id = "fileDownload" document.head.appendChild(a) //avoid no body. a.style = "display: none" } return function(data, fileName, fileType) { var blob = getBlob(data, fileType), url = window.URL.createObjectURL(blob) if (window.navigator.msSaveBlob) { // for ie series window.navigator.msSaveBlob(blob, fileName) } else { a.href = url a.download = fileName a.click() } window.URL.revokeObjectURL(url) } }()) } function getBlob(data, fileType) { var binary = data try { binary = fixBinary(atob(data)); // base64 to binary to arrayBuffer } catch (e) { console.log(e); } var blob = new Blob([binary], { type: fileType || 'text/plain;charset=UTF-8' }) return blob; } var csvDownload = function() { util.saveAs(csvData, "test.csv", "application/vnd.ms-excel") } function removeHeaderBase64(base64) { return base64.substr(base64.indexOf(";base64,") + ";base64,".length) } var imageDownload = function() { var width = document.getElementById("width"); var height = document.getElementById("height"); if (+width.value > 3000) width.value = "3000" if (+height.value > 3000) height.value = "3000" if (+width.value < 0) width.value = "1" if (+height.value < 0) height.value = "1" util.saveAs(removeHeaderBase64(document.getElementById("myCanvas").toDataURL('image/jpeg')), "resized.jpeg", "image/jpeg") } function downloadAll(){ var zip = new JSZip(); zip.file("test.csv", getBlob(csvData, "application/vnd.ms-excel")); var img = zip.folder("images"); img.file("resized.jpeg", removeHeaderBase64(document.getElementById("myCanvas").toDataURL('image/jpeg')), {base64: true}); zip.generateAsync({type:"blob"}) .then(function(content) { // see FileSaver.js util.saveAs(content, "example.zip", "application/zip"); }).catch(function(err){ console.log(err) }) } var csvData = "policyID,statecode,county,eq_site_limit,hu_site_limit,fl_site_limit,fr_site_limit,tiv_2011,tiv_2012,eq_site_deductible,hu_site_deductible,fl_site_deductible,fr_site_deductible,point_latitude,point_longitude,line,construction,point_granularity\r\n" + "119736,FL,CLAY COUNTY,498960,498960,498960,498960,498960,792148.9,0,9979.2,0,0,30.102261,-81.711777,Residential,Masonry,1\r\n" + "448094,FL,CLAY COUNTY,1322376.3,1322376.3,1322376.3,1322376.3,1322376.3,1438163.57,0,0,0,0,30.063936,-81.707664,Residential,Masonry,30\r\n" + "206893,FL,CLAY COUNTY,190724.4,190724.4,190724.4,190724.4,190724.4,192476.78,0,0,0,0,30.089579,-81.700455,Residential,Wood,1\r\n" + "333743,FL,CLAY COUNTY,0,79520.76,0,0,79520.76,86854.48,0,0,0,0,30.063236,-81.707703,Residential,Wood,30\r\n" + "172534,FL,CLAY COUNTY,0,254281.5,0,254281.5,254281.5,246144.49,0,0,0,0,30.060614,-81.702675,Residential,Wood,1\r\n" + "785275,FL,CLAY COUNTY,0,515035.62,0,0,515035.62,884419.17,0,0,0,0,30.063236,-81.707703,Residential,Masonry,3\r\n" + "995932,FL,CLAY COUNTY,0,19260000,0,0,19260000,20610000,0,0,0,0,30.102226,-81.713882,Commercial,Reinforced Concrete,1\r\n"
자 그러면, 전 게시물과의 차이점을 보자.
저기 보면 downloadAll이라는 함수가 생겼다!
jsZip은 blob을 데이터로 받기 때문에, util.saveAs에서 getBlob이 빠져 나온것을 확인 할 수 있다.
downloadAll을 좀 설명 하자면, JSZIP의 객체를 만들고, 그 객체에 파일을 생성 하거나,
폴더를 생성해서 해당 객체에 파일을 넣을수가 있고, 마지막으로 JSZip객체를 Blob으로 생성 하면, 끝!
와 쉽다~ 사용방법이 너무 간단해서, 전 게시물이랑 별로 차이도 안나네... 어쨋든 끝.
댓글
댓글 쓰기