HTML 버튼이나 JavaScript를 클릭할 때 파일 다운로드를 실행하는 방법은 무엇입니까?

요즘에는 많은 애플리케이션에서 사용자가 파일을 업로드 및 다운로드할 수 있습니다. 예를 들어 표절 탐지 도구를 사용하면 사용자는 일부 텍스트가 포함된 문서 파일을 업로드할 수 있습니다. 그런 다음 표절 여부를 확인하고 사용자가 다운로드할 수 있는 보고서를 생성합니다.

입력 유형 파일을 사용하여 파일 업로드 버튼을 만드는 방법은 누구나 알고 있지만 JavaScript/JQuery를 사용하여 파일 다운로드 버튼을 만드는 방법을 아는 개발자는 거의 없습니다.

이 튜토리얼에서는 HTML 버튼이나 JavaScript를 클릭할 때 파일 다운로드를 트리거하는 다양한 방법을 알려줍니다.

버튼을 클릭할 때 HTML의 태그와 다운로드 속성을 사용하여 파일 다운로드를 실행하세요

태그에 다운로드 속성을 추가할 때마다 태그를 파일 다운로드 버튼으로 사용할 수 있습니다. 사용자가 링크를 클릭할 때 특정 파일을 다운로드할 수 있도록 하려면 파일의 URL을 href 속성 값으로 전달해야 합니다.

문법

사용자는 아래 구문에 따라 태그를 사용하여 파일 다운로드 버튼을 만들 수 있습니다.

위 구문에서는 다운로드 속성 값으로 다운로드 속성과 파일 이름을 추가했습니다.

매개변수

• file_path - 사용자가 다운로드할 파일의 경로입니다.

예 1

예 1

위 구문에서는 텍스트를 인코딩하여 파일에 추가하고 태그를 사용하여 만들었습니다.

알고리즘

• 1단계 - HTML 입력에 액세스하여 텍스트를 가져옵니다.

• 2단계 − JavaScript createElement() 메서드를 사용하여 사용자 정의 HTML 태그를 만듭니다.

• 3단계 − setAttribute() 메서드를 사용하여 Hidden_a HTML 요소에 대한 href 속성을 설정합니다. 인코딩된 텍스트를 href 속성의 값으로 사용합니다.

• 4단계 − setAttribute() 메서드를 다시 사용하고 다운로드 속성을 숨겨진 요소 Hidden_a의 다운로드 파일 이름 값으로 설정합니다.

• 5단계 - Hidden_a 요소를 본문에 추가합니다.

• 6단계 - click() 메서드를 사용하여 Hidden_a 요소에 대한 클릭을 트리거합니다. click() 메서드를 호출하면 다운로드가 시작됩니다.

• 7단계 - RemoveChild() 메서드를 사용하여 문서 본문에서 Hidden_a 요소를 제거합니다.

예 3

예 3

아래 예에서 사용자는 입력 필드에 사용자 정의 텍스트를 입력하고 버튼을 클릭하여 JavaScript를 사용하여 파일 다운로드를 트리거할 수 있습니다.

axios 라이브러리를 사용하여 다운로드 파일 버튼 만들기

axios 라이브러리를 사용하면 모든 URL에서 데이터를 가져올 수 있습니다. 따라서 우리는 모든 URL이나 파일 경로에서 데이터를 가져온 다음 해당 데이터를 태그의 href 속성 값으로 설정합니다. 또한 setAttribute() 메소드를 사용하여 태그에 다운로드 속성을 추가하고 click() 메소드를 사용하여 파일 다운로드를 트리거합니다.

문법

사용자는 axios 및 JavaScript를 사용하여 다음 구문에 따라 파일 다운로드를 트리거할 수 있습니다.

위 구문에서 axios.get() 메서드를 사용하면 결과 변수에 저장된 file_path에서 데이터를 가져올 수 있습니다. 그런 다음 new Blob() 생성자를 사용하여 데이터를 Blob 객체로 변환합니다.

예 4

예 4

아래 예에서는 axios를 사용하여 URL에서 데이터를 가져와 Blob 객체로 변환하고 href 속성의 값으로 설정합니다.

그런 다음 JavaScript를 통해 요소를 클릭하여 파일 다운로드를 실행했습니다.

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