기본 콘텐츠로 건너뛰기

8월, 2017의 게시물 표시

javascript 압축 파일 다운로드

이번에는 전 게시글의 응용판? 이라고 해야하나....? 어쨋든! 우리는 각각의 파일들을 다운로드 해보았다. 그런데 생각보다 귀찮음?을 느꼇을 것이다. 파일을 각각 다운 받아야 한다는 현실때문에! 그래 파일 두개야 뭐 그렇다 치지... 하지만, 개발자도 사용자도 게으름뱅이이다. 자 결국, 우리가 해야 하는 것은 파일을 한 번에 둘다! 다운 받는 것이다. 물론, 클릭 한번에 여러개의 함수를 엮어서 다운받게 하면 되지만! 크롬에서 자주 봤듯이, 여러개의 파일을 다운로드를 시도하면 <- 여러개의 파일을 다운로드 합니다. 허용 합니까? 하고 물어보는 것을 볼 수 있다. 게다가 다운로드 한 파일들을 찾기도 귀찮다는 것. 자 해결책을 제시해보자면, 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/ 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() {

javascript 파일 다운로드

 개발을 하다보면, 클라이언트에 데이터가 있어서, 해당 내용을 파일로 다운로드 해야 하는 경우가 있다. 이번 포스트에서 서버와 상호 작용 없이, 간단하게 캔버스에 있는 이미지와 csv를 다운로드 하게 하는 내용을 작성하겠다.  필요한 작업은 아래와 같다. https://developer.mozilla.org/ko/docs/Web/API/Blob 0. 데이터 준비 1. BLOB(binary large object)를 만든다. 2. Blob을 URL.createObjectURL을 사용하여, 해당 binary의 주소를 생성. 3. a태그를 이용하여, 해당 url 셋팅 하고, 다운로드.  끝이네... 간단하네.. 일단 코드! 코드를 확인 하자.  간단하게, csv파일을 다운로드 하는 것과, canvas의 이미지를 다운로드 해보자.  샘플입니다. http://plnkr.co/edit/GZNEhOO99vgICgo9DZjJ?p=preview 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.