>웹 프론트엔드 >JS 튜토리얼 >HTML 버튼이나 JavaScript를 사용하여 파일 다운로드를 실행하는 방법은 무엇입니까?

HTML 버튼이나 JavaScript를 사용하여 파일 다운로드를 실행하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-12-03 05:37:09343검색

How to Trigger File Downloads Using HTML Buttons or JavaScript?

HTML 버튼 또는 JavaScript에서 파일 다운로드 트리거

웹 개발에서는 사용자에게 파일 다운로드 기능을 제공해야 하는 경우가 많습니다. 전통적인 HTML href 속성이 있는 앵커 태그는 이러한 목적으로 자주 사용되며 버튼이나 JavaScript를 사용하여 다운로드를 실행하려는 상황에 직면할 수 있습니다.

방법 1: HTML5 다운로드 속성 사용

HTML 버튼을 사용하여 파일 다운로드를 실행하려면 HTML5 다운로드 속성을 사용할 수 있습니다. 이 속성은 파일을 저장할 때 사용할 파일 이름을 지정하고 및 <버튼> elements.

<button type="button" download="file.doc">Download!</button>

방법 2: JavaScript를 통해 다운로드 트리거

JavaScript를 사용하여 프로그래밍 방식으로 파일 다운로드를 트리거할 수도 있습니다. 그러나 이 방법에는 약간 다른 접근 방식이 필요합니다. href 속성을 사용하는 대신 창 개체의 location.href 속성을 파일의 URL로 설정하고 해당 파일 이름을 a 요소의 다운로드 속성에 추가할 수 있습니다.

$("#fileRequest").click(function() {
  location.href = "file.doc";
  $("a").attr("download", "proposed_file_name");
});

추가 고려 사항

  • 파일 경로는 페이지와 동일한 출처에 있어야 한다는 점을 기억하세요(예: 공유 동일한 도메인, 하위 도메인, 프로토콜 및 포트).
  • 파일 이름을 지정하지 않으면 다운로드되는 파일의 기본 파일 이름이 사용됩니다.
  • 다운로드 속성은 대부분의 경우 지원됩니다. 최신 브라우저에서는 동작이 약간 다를 수 있습니다.

위 내용은 HTML 버튼이나 JavaScript를 사용하여 파일 다운로드를 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.