如何使用 HTML 按鈕和 JavaScript 觸發文件下載？

使用HTML 按鈕和JavaScript 觸發檔案下載

在Web 開發中，透過HTML 按鈕或JavaScript 觸發檔案下載可能是一項簡單的任務。本文旨在透過解釋如何實現這一需求來解決這一需求，包括 HTML 和 JavaScript 方法。

使用帶有「下載」屬性的 HTML 按鈕

HTML5 引入了 的下載屬性元素。透過使用此屬性，您可以在使用者點擊自訂按鈕時啟動檔案下載，而不是使用錨標記：

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

確保下載屬性指定所需的檔案名，否則瀏覽器將使用原始文件名。

使用 JavaScript 進行檔案下載

JavaScript 提供了另一種觸發檔案的方法下載。透過利用window.location.href 屬性，您可以以程式設計方式啟動下載：

let downloadUrl = "file.doc";
window.location.href = downloadUrl;

需要注意的是，該檔案必須可在與腳本相同的來源上訪問，才能使此方法發揮作用。

使用 jQuery 進行檔案下載

jQuery 簡化了觸發過程透過 JavaScript下載檔案：

$("#fileRequest").click(function() {
  window.location.href = "file.doc";
});

其他注意事項

• 避免使用伺服器端腳本或修改伺服器標頭來啟動檔案下載。
• 使用滿足瀏覽器相容性要求的 HTML 和 JavaScript 方法。
• 跨不同版本測試功能瀏覽器以確保一致的行為。

以上是如何使用 HTML 按鈕和 JavaScript 觸發文件下載？的詳細內容。更多資訊請關注PHP中文網其他相關文章！