Tistory View
Zip파일내의 파일 압축 풀기
실제 파일을 압축을 풀려면 다음과 같이 한다.
zip.file( entryName ).async("base64").then(
function ( base64Text ) // 압축이 다 풀리면 실행되는 함수
{
// base64Text : 압축이 풀린 내용
}
);
entryName은 zip파일내의 파일이름이며 결과가 base64형태로 나오게 된다.
jszip라이브러리는 성능을 위해(javascript의 꾸진 성능을 보완하려고) thread를 만들어 압축을 푼다. 압축이 다 풀어지면 지정한 함수가 수행되고, 압축을 푼 데이터가 파라미터로 넘어오게 된다. 이 파라미터가 어떤 형태를 갖게 할지는 aync함수의 parameter로 지정할 수가 있다.
우리는 브라우저를 사용하기 때문에 base64를 이용하는 것이 좀 편한 방법이다.
압축을 풀어서 <img>태그에 그림그리기
실제 웹브라우저에서 특별히 할 일은 그림을 표시하는 것외에는 딱히 쓸 일이 없다. 뭐 다른 작업도 할 수 있지만.. 필자 가 필요한 것은 사실상 이 것을 만들어 내는 것이었다.
현재 브라우저 메모리에 이미지가 있다면 다음과 같은 방식으로 이미지를 그려낼 수 가 있다.
var img = document.getElementById( 아이디 );
img.setAttribute( 'src', 'data:image/jpeg;base64, ' + base64Text );
이미지 태그에 base64로 인코딩된 이미지데이터를 지정하면 브라우저가 화면에 그려준다.
우리는 zip파일을 다루고 있으니, zip파일내의 특정 파일을 이미지태그에 그리는 함수를 만들도록 하자
function zip_setImageToImgTag( zip, entryName, imgId )
{
zip.file( entryName ).async("base64").then(
function ( base64Text )
{
var img = document.getElementById( imgId );
img.setAttribute( 'src', 'data:image/jpeg;base64, ' + base64Text );
}
);
}
이미지가 실제 jpeg가 아니어도 브라우저는 화면에 잘 그리기 때문에 그냥 jpeg로 지정을 했다. 일일이 분석해서 mime-type을 지정하기 귀찮았다..
압축을 풀어서 파일 다운로드
다음의 코드로 브라우저가 파일을 받게 할 수가 있다.
window.location="data:application/octastream;base64, " + base64Text;
이 방법의 문제는 파일이름을 지정할 방법이(몰라요).. 따라서 다음의 코드로 대체한다.
var element = document.createElement('a');
element.setAttribute('href', 'data:application/octetstream;base64,' + base64Text );
element.setAttribute('download', filename );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
순간적으로 a태그를 만들어 내용을 지정하고 click을 시뮬레이션해서 브라우저가 파일을 받게 한다.
여거서 다운로드될 파일명을 filename에 지정하면 된다.
zip파일에서 특정파일을 다운로드 받게하는 함수는 다음과 같다.
function zip_download_entry( zip, entryName, filename ) {
zip.file( entryName ).async("base64").then(
function ( base64Text )
{
//window.location="data:application/octastream;base64, " + base64Text;
var element = document.createElement('a');
element.setAttribute('href', 'data:application/octastream;base64,' + base64Text );
element.setAttribute('download', filename );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
);
}
'web > javascript' 카테고리의 다른 글
파일 압축하기 : Javascript로 Zip파일 다루기 (0) | 2020.02.19 |
---|---|
간단한 웹서버 돌리기 : Javascript로 zip파일 다루기 (0) | 2020.02.19 |
인스턴스 만들기 / 파일목록 뽑기 : Javascript로 zip파일 다루기 (0) | 2020.02.19 |
목록 : Javascript로 Zip파일다루기 (0) | 2020.02.19 |
Zip파일 구조와 준비작업 : Javascript로 zip파일다루기 (0) | 2020.02.19 |
- Total
- Today
- Yesterday
- choreographer
- 전기요금
- texture
- 전기료
- 텍스처
- 금리
- 경제보복
- 재태크
- gpgpu
- 블로그
- 컴퓨트쉐이더
- 컴퓨트셰이더
- 에어콘
- 안드로이드
- OpenGL ES
- 사용료
- Android
- OpenGLes
- 티스토리
- 애드핏
- ComputeShader
- 아끼는 법
- 전기세
- 재테크
- 애드센스
- TTS
- 적금
- 공유 컨텍스트
- 에어컨
- 예금
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |