a태그 이용해서 파일 다운로드 하는 방법 2가지

a태그를 이용해서 다운로드할 수 있는 방법 두 가지에 대해서 알아보도록 하겠습니다.

 

a 태그 download 속성 이용하기

a태그는 해당 url로 이동하거나, 새 탭을 열 수 있습니다.

하지만 download 속성을 사용하면 해당 url의 파일을 다운로드할 수 있습니다.

download 값을 넣게 되면 해당 이름으로 파일 다운로드를 할 수 있습니다.

 <a href="download/abc.txt" download="abc.txt">다운로드</a>

 

 

단 주의해야할점이 있습니다.

동일 출처 정책에 의해서 다운로드 파일의 경로가 현재 페이지의 url과 동일해야 다운로드가 가능합니다.

clickEvent를 이용해서 다운로드하기

다운로드의 파일 경로가 다르다면 a tag에 click 이벤트를 이용해서 다운로드할 수 있습니다.

아래와 같은 방법으로 파일 다운로드를 할 수 있습니다.

 <a onclick="downloadFile">다운로드</a>

const clickHandler = async (url, name) => {
  const response = await fetch(url)
  const arrayBuffer = await response.arrayBuffer()
  const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' })
  const blobURL = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = blobURL
  a.style.display = 'none'
  if (name && name.length) {
    a.download = name
  }

  document.body.appendChild(a)
  a.click()
  a.remove()
}