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

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

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

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

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

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

문법

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

으아악

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

매개변수

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

예 1

은 다음과 같이 번역됩니다.

예 1

아래 예에서는 HTML 태그의 href 속성 값으로 이미지 URL을 전달하고 있습니다. 다운로드 버튼을 태그의 앵커 텍스트로 사용합니다.

사용자가 버튼을 클릭할 때마다 파일 다운로드가 실행되는 것을 볼 수 있습니다.

으아악

window.open() 메소드를 사용하세요

window.open() 메서드는 새 탭에서 URL을 엽니다. open() 메소드의 매개변수로 URL을 전달할 수 있습니다.

open() 메소드가 URL을 열 수 없으면 파일 다운로드가 트리거됩니다.

문법

사용자는 다음 구문에 따라 window.open() 메서드를 사용하여 파일 다운로드 버튼을 만들 수 있습니다.

으아악

위 구문에서는 파일 URL을 window.open() 메서드의 매개 변수로 전달합니다.

예 2

아래 예에서는 사용자가 버튼을 클릭할 때마다 downloadFile() 함수가 트리거됩니다. downloadFile() 함수에서 window.open() 메서드는 파일 다운로드를 트리거합니다.

으아악

사용자 입력을 받고, 해당 입력을 사용하여 파일을 만들고, 사용자가 파일을 다운로드할 수 있도록 허용

이 방법을 사용하면 사용자가 입력 상자에 텍스트를 쓸 수 있습니다. 그런 다음 입력한 텍스트를 사용하여 새 파일을 생성하고 사용자가 파일을 다운로드할 수 있도록 합니다.

문법

사용자는 다음 구문에 따라 사용자 정의 텍스트로 파일을 생성하고 사용자가 다운로드하도록 허용할 수 있습니다.

으아악

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

알고리즘

• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!