點擊HTML按鈕或JavaScript時如何觸發檔案下載？
現今，許多應用程式允許使用者進行檔案的上傳和下載。例如，抄襲檢測工具允許使用者上傳一個包含一些文字的文件檔案。然後，它會檢查抄襲並產生報告，用戶可以下載該報告。
每個人都知道使用input type file來建立一個上傳檔案按鈕，但是很少有開發者知道如何使用JavaScript/ JQuery來建立一個檔案下載按鈕。
本教學將教導點擊HTML按鈕或JavaScript時觸發檔案下載的各種方法。
使用HTML的標籤和download屬性，在按鈕點擊時觸發檔案下載
每當我們在標籤上新增download屬性時，我們可以將標籤當作檔案下載按鈕使用。我們需要將檔案的URL作為href屬性的值傳遞，以允許使用者在點擊連結時下載特定的檔案。
文法
使用者可以按照下面的語法使用標籤建立一個檔案下載按鈕。
<a href = "file_path" download = "file_name">
在上述語法中，我們加入了download屬性和檔案名稱作為download屬性的值。
參數
file_path – 這是我們希望使用者下載的檔案路徑。
Example 1
的翻譯為：範例 1
在下面的範例中，我們將圖像URL作為HTML 標籤的href屬性的值傳遞。我們使用下載按鈕作為標籤的錨文本每當使用者點擊按鈕時，他們可以看到它觸發了文件下載。
<html>
<body>
<h3 id="Using-the-i-download-attribute-of-a-tag-i-to-create-file-download-button-using-JavaScript"> Using the <i> download attribute of <a> tag </i> to create file download button using JavaScript. </h3>
<p> Click the below button to download the image file </p>
<a href = "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg"
Download = "test_image">
<button type = "button"> Download </button>
</a>
</body>
</html>
使用window.open()方法
window.open() 方法在新分頁中開啟一個URL。我們可以將URL當作 open() 方法的參數傳遞。
如果open()方法無法開啟URL，則會觸發檔案下載。
文法
使用者可以依照以下語法使用window.open()方法來建立一個檔案下載按鈕。
window.open("file_url")
在上述語法中，我們將檔案URL作為window.open()方法的參數傳遞。
Example 2
在下面的範例中，每當使用者點擊按鈕時，它會觸發downloadFile()函數。在downloadFile()函數中，window.open()方法會觸發檔案下載。
<html>
<body>
<h3 id="Using-the-i-window-open-method-i-to-create-a-file-download-button-using-JavaScript"> Using the <i> window.open() method </i> to create a file download button using JavaScript. </h3>
<p> Click the below button to download the image file </p>
<button type = "button" onclick = "downloadFile()"> Download </button>
</body>
<script>
function downloadFile() {
window.open("https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg")
}
</script>
</html>
取得使用者輸入，使用該輸入建立文件，並允許使用者下載該文件
這種方法將允許使用者在輸入框中編寫文字。之後，使用輸入的文本，我們將建立一個新文件，並允許使用者下載該文件。
文法
使用者可以按照以下語法建立一個文件，其中包含自訂文本，並允許使用者下載它。
var hidden_a = document.createElement('a');
hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texts));
hidden_a.setAttribute('download', "text_file");
document.body.appendChild(hidden_a); hidden_a.click();
在上述語法中，我們對文字進行了編碼，以將其附加到文件中，並使用標籤進行建立。
演算法
第一步 - 透過存取HTML輸入來取得文字。
Step 2 − Create a custom HTML tag using JavaScript createElement() method.
步驟 3 − 使用setAttribute()方法，為hidden_a HTML元素設定href屬性。將編碼後的文字作為href屬性的值。
步驟 4 − 再次使用 setAttribute() 方法，並將 download 屬性設定為隱藏元素 hidden_a 的下載檔案名稱值。
第五步 - 將hidden_a元素追加到body中。
步驟6 - 使用click()方法在hidden_a元素上觸發點擊。當它呼叫click()方法時，它開始下載。
第7步 - 使用removeChild()方法從文件主體移除hidden_a元素。
Example 3
的中文翻譯為：範例3
#In the example below, users can enter any custom text in the input field and click the button to trigger file download using JavaScript. We have implemented the above algorithm to trigger a file download.
#######################。<html>
<body>
<h3 id="Create-the-file-from-the-custom-text-and-allow-users-to-download-that-file"> Create the file from the custom text and allow users to download that file </h3>
<p> Click the below button to download the file with custom text. </p>
<input type = "text" id = "file_text" value = "Entetr some text here.">
<button type = "button" onclick = "startDownload()"> Download </button>
</body>
<script>
function startDownload() {
// access the text from the input field
let user_input = document.getElementById('file_text');
let texts = user_input.value;
// Create dummy <a> element using JavaScript.
var hidden_a = document.createElement('a');
// add texts as a href of <a> element after encoding.
hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8, '+ encodeURIComponent(texts));
// also set the value of the download attribute
hidden_a.setAttribute('download', "text_file");
document.body.appendChild(hidden_a);
// click the link element
hidden_a.click();
document.body.removeChild(hidden_a);
}
</script>
</html>
let results = await axios({
url: 'file_path',
method: 'GET',
responseType: 'blob'
})
// use results as a value of href attribute of <a> tag to download file
hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"> </script>
</head>
<body>
<h3 id="Using-the-i-axios-library-i-to-trigger-a-download-file"> Using the <i> axios library </i> to trigger a download file. </h3>
<p> Click the below button to download the file with custom text. </p>
<button type = "button" onclick = "startDownload()"> Download </button>
</body>
<script>
async function startDownload() {
// get data using axios
let results = await axios({
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4gbghQxKQ00p3xIvyMBXBgGmChzLSh1VQId1oyhYrgir1bkn812dc1LwOgnajgWd-Yo&usqp=CAU',
method: 'GET',
responseType: 'blob'
})
let hidden_a = document.createElement('a');
hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
hidden_a.setAttribute('download', 'download_image.jpg');
document.body.appendChild(hidden_a);
hidden_a.click();
}
</script>
</html>以上是點擊HTML按鈕或JavaScript時如何觸發檔案下載？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Python下載檔案後的開啟操作
Apr 03, 2024 pm 03:39 PM
Python提供以下選項開啟下載檔案：open()函數：使用指定路徑和模式（如'r'、'w'、'a'）開啟檔案。 Requests函式庫：使用其download()方法自動指派名稱並直接開啟檔案。 Pathlib函式庫：使用write_bytes()和read_text()方法寫入和讀取檔案內容。
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
