이미지를 ZIP파일로 다운 받아보자 In Next.js

이미지 서버에 있는 이미지 파일을 ZIP파일로 만들어 달라는 요구가 들어왔다.

먼저 이미지 파일을 불러와야 한다.

react에서 다른 서버에 있는 파일에 접근할려면 cors 문제가 발생한다.

 

next.js 를 사용한다면 이미지를 buffer로 변환하여 브라우저단으로 전달하여 다운 받을 수 있다.

S3에 저장된 이미지를 다운 받는 법을 기록하겠음 ! ✏️

 

 

1. 이미지를 buffer 데이터로 리턴하기 in API

...


const blob = await fetch(url, { method: 'GET' }).then((res) => res.blob());
const ret = {
	result : Buffer.from(await blob.arrayBuffer())
}

return res.send(ret);

next의 API 에 위치한 코드이다.

fetch를 통하여 이미지 서버에 접근하여 이미지 데이터를 가져 온다.

리턴하는 값은 buffer로 변환된 값이다.

 

 

2. buffer 데이터를 zip 파일에 담아 보자

이제 api에서 받은 buffer 데이터를 이미지 데이터로 변환시킨뒤, zip 파일에 담겨 주자.

이때 JSZip 라이브러리를 사용했다.

const zip = new JSZip();
const image = result  //api에서 받은 buffer 값
zip.file('파일명', Buffer.from(image));
    
zip.generateAsync({ type: 'blob' }).then((content) => {
  saveAs(content, `파일명.zip`);
});