다운로드 링크를 만드는 방법

어떤 것들이 어떻게 완전히 원을 그리는지 흥미 롭습니다. 웹 초기에는 브라우저가 이미지, PDF 파일 및 문서와 같이 웹 페이지가 아닌 파일에 대한 링크를 자동으로 다운로드했습니다. 그 후 브라우저는 매우 발전하여 거의 모든 파일을 실시간으로 열 수있게되었습니다. 그러나 그것은 개발자들에게 문제를 일으켰습니다. 브라우저가 파일을 열지 않고 다운로드하도록 강제하는 방법은 무엇입니까? 문제를 해결하기 위해 많은 해킹과 해결 방법이 등장했지만 진정한 해결책은 없었습니다. HTML5로 모든 것이 변경되었습니다. 속성 다운로드 도입되었습니다.

이제 개발자는 HTML 앵커 태그에 특수 다운로드 속성을 추가하여 대상 파일을 여는 대신 링크를 다운로드로 취급하도록 브라우저에 지시 할 수 있습니다. 다운로드 속성을 사용하여 브라우저가 다운로드 링크를 처리하는 방식을 제어 할 수있는 몇 가지 방법이 있습니다. 더 좋은 점은 모든 최신 브라우저가 다운로드 속성을 지원하므로 호환성 문제 나 대체의 필요성이 없어야합니다.

다운로드 속성을 처리 할 수있는 몇 가지 방법이 있습니다. 각각 고유 한 이점이 있으며 모두 서로 다른 브라우저에서 원활하게 작동합니다.

일반 다운로드 속성

다운로드 속성을 사용하는 가장 간단한 방법은 앵커 태그에 가장 기본적인 형식으로 속성을 포함하는 것입니다. 추가 파일 이름이나 지원 정보를 포함 할 필요가 없습니다. 결과는 다음과 같습니다.

지금 다운로드하세요!

"다운로드"를 포함하면 페이지를 읽는 모든 브라우저에 대상 링크를 여는 대신 다운로드하도록 지시하는 것입니다. 이 경우 브라우저는 동일한 이름의 파일을 그대로 다운로드합니다.

파일 이름 변경

실제로 이름을 변경하려면 어떻게됩니까? 이 작업을 수행하고 싶은 경우가 많이 있습니다. 자동으로 생성 된 파일 이름이 좋은 예입니다. 그들은 일반적으로 가비지 문자열로 된 엄청나게 긴 이름을 가지고 있습니다. 그것은 방문자에게 원하는 경험이 아닙니다. 다운로드 속성으로 표준화 할 수 있습니다.

파일 이름을 지정하려면 다운로드 속성을 동일하게 설정하십시오. 파일 확장자를 제외하십시오. 브라우저는 파일 형식을 변환 할 수없고 변환하지 않을 것이므로 시도하는 것이 의미가 없습니다.

지금 다운로드하세요!

방문자는 파일을 your-file.pdf로 다운로드합니다.

이미지 다운로드

이와 함께 사용자가 이미지를 직접 다운로드 할 수있는 단순화 된 방법이 제공됩니다. 이것은 혁명적이지 않으며 직접 조합 할 수도 있지만 다운로드 속성을 사용하여 다운로드 가능한 이미지 링크를 만들 수 있습니다.

페이지에서 평소처럼 이미지를 설정하여 시작하십시오. 물론 이것은 다운로드 할 수있는 이미지입니다.

그런 다음 모든 것을 앵커 태그에 캡슐화하여 이미지 경로에 연결합니다.

마지막으로 다운로드 속성을 앵커 태그에 추가하십시오. 원하는 경우 이미지 이름을 변경할 수 있습니다.

이제 방문자가 이미지를 클릭하면 서버에서 직접 이미지를 자동으로 다운로드합니다. 필요하지도 않고 개발자에게는 지나친 것처럼 보일 수 있지만 사이트 방문자가 이미지를 보거나 다운로드하기 위해 마우스 오른쪽 버튼을 클릭 할 것이라고 생각할까요?