HTML로 다운로드 링크 생성

Subodh Poudel 2023년6월20일
HTML로 다운로드 링크 생성

이 기사에서는 HTML로 다운로드 링크를 만드는 방법을 소개합니다.

download 속성을 사용하여 HTML에서 다운로드 링크 생성

HTML의 앵커 요소 내에서 download 속성을 사용하여 다운로드 링크를 만들 수 있습니다. 앵커 태그에서 href 속성을 사용하여 다운로드할 파일의 링크를 지정할 수 있습니다.

앵커 태그는 대상 파일에 대한 하이퍼링크를 생성하고 링크를 클릭하면 파일이 다운로드됩니다. download 속성에 대한 값을 설정하면 파일이 해당 이름으로 다운로드됩니다.

예를 들어 <a> 태그를 생성하고 href 속성에 다운로드할 파일의 경로를 설정합니다. 여기서 파일은 parker.jpeg 이미지입니다.

href 속성 옆에 다운로드 속성을 작성합니다. 앵커 태그 사이에 다운로드 텍스트를 작성하여 클릭 가능한 텍스트를 만듭니다.

여기서 이미지는 HTML 파일과 같은 폴더에 있습니다.

다운로드 링크를 클릭하면 파일을 다운로드하라는 메시지가 표시됩니다. 다운로드 링크를 만들 때 고려해야 할 가장 중요한 사항은 웹 페이지가 서버에서 호스팅되어야 한다는 것입니다.

파일이 라이브 서버에서 실행 중인 경우에만 파일을 다운로드하라는 메시지가 표시됩니다. 예를 들어 HTML 파일을 만들고 파일을 열면 로컬 파일 시스템의 브라우저에서 파일이 열립니다.

URL은 file:///var/www/html/index.html과 같습니다. 이러한 조건에서 링크를 클릭하면 이미지가 웹 페이지에 표시되지만 이는 우리가 원하는 것이 아닙니다.

서버에서 HTML 파일을 실행하는 몇 가지 방법을 구현할 수 있습니다. 한 가지 방법은 시스템에서 로컬 서버를 시작하고 localhost에서 HTML 파일을 제공하는 것입니다.

서버를 실행하는 우아한 방법입니다. 따라서 HTML의 앵커 태그에서 download 속성을 사용하여 다운로드 링크를 만들 수 있습니다.

예제 코드:

<a href="/img/DelftStack/logo.png" download> Download </a>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn