같은 origin으로부터 받아오는 image

<a href=`${imageUrl}` download='file-name.png'>Download</a>

간단하게 a 태그를 활용할 수 있음.

다른 origin (ex. S3)으로부터 받아오는 경우

이 경우는 http의 표준 header인 Content-Disposition 헤더(참고)를 활용하여야 한다.

url을 통해 파일을 불러올 때, response header에 있는 Content-Disposition값이 inline인 경우 브라우저는 해당 컨텐츠를 화면에 보여주어야 하는 컨텐츠로 인식한다. 반면, attachment인 경우 해당 컨텐츠를 다운로드해야 하는 컨텐츠로 인식하고 다운로드를 시작한다. attachment인 경우 name 혹은 filename을 통해 다운받는 파일의 이름을 지정해줄 수 있다.

만약 이 경우라면 서버에서 response에 해당 헤더를 지정해서 넘겨주어야 한다. 이런 처리는 프록시서버에서 다룰 수 있는데, CF의 경우 worker를 등록하여 설정할 수 있다. 다음은 worker에서 활용할 수 있는 핸들러의 예시이다.

export async function attachmentHandler(request: Request, response: Response): Promise<Response> {
  const url = new URL(request.url);
  if (url.searchParams.get('attach') === 'true') {
    let contentDisposition = (response && response.headers && response.headers.get('Content-Disposition')) || '';
    response = new Response(response.body, response);
    response.headers.set('Content-Disposition', 'attachment; ' + contentDisposition);
    return response;
  }
  return response;

기타 방법