在 Web 開發中，文件下載功能是一個非常常見的功能。在本文中，將介紹在 JavaScript 中如何實現下載文件。

使用 location.href

當需要打開新頁面時，在 JavaScript 中可以使用 location.href 。在某些情況下，可以用它來下載文件，當然這里的下載實際上依賴于服務器設置。因為當瀏覽器檢測到 url 的響應是不支持的類型時，它將下載文件而不是直接預覽，通常是設置 content-type。

使用 標簽的下載屬性

HTML5 中的 download 屬性用于用戶點擊超鏈接時下載文件。

此屬性指示瀏覽器下載 URL 而不是導航到它，因此將提示用戶將其保存為本地文件。如果屬性有一個值，那么此值將在下載保存過程中作為預填充的文件名（如果用戶需要，仍然可以更改文件名）。此屬性對允許的值沒有限制，但是 / 和 會被轉換為下劃線。大多數文件系統限制了文件名中的標點符號，因此，瀏覽器將相應地調整建議的文件名。

• 此屬性僅適用于同源 URL。
• 盡管 HTTP URL 需要位于同一源中，但是可以使用 blob:URL 和 data:URL ，以方便用戶下載使用 JavaScript 生成的內容（例如使用在線繪圖 Web 應用程序創建的照片）。
• 如果 HTTP 頭中的 Content-Disposition 屬性賦予了一個不同于此屬性的文件名，HTTP 頭屬性優先于此屬性。
• 如果 HTTP 頭屬性 Content-Disposition 被設置為 inline（即 Content-Disposition='inline'），那么 Firefox 優先考慮 HTTP 頭 Content-Dispositiondownload 屬性。

使用 API 下載文件

使用 blob: ，在 JavaScript 中實現下載的常用方式。通過 API 獲取URL數據并將其轉換為 blob。對于受同源URL限制的文件，可以使用 fetch，因為 fetch 支持來自跨源的請求數據。

可以使用下面的函數來下載文件：

function downloadFile(url, fileName) {
    fetch(url, {
        method: "get",
        mode: "no-cors",
        referrerPolicy: "no-referrer",
    })
        .then((res) => res.blob())
        .then((res) => {
            const aElement = document.createElement("a");
            aElement.setAttribute("download", fileName);
            const href = URL.createObjectURL(res);
            aElement.href = href;
            aElement.setAttribute("target", "_blank");
            aElement.click();
            URL.revokeObjectURL(href);
        });
}