JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中下載文件

有多種方法可以在 JavaScript 中下載文件。您可以使用錨的 download 屬性或以編程方式在 JavaScript 中創建對象 URL。

download 屬性

download 屬性被添加到 HTML 5 中的錨元素。它通知瀏覽器下載請求的 URL 而不是導航到它。

<a href="file.pdf" download>Download PDF</a>

您還可以為 download 指定一個可選值 下載後用作文件名的屬性。如果未提供該值,則使用原始文件名。

<a href="file.pdf" download="resume.pdf">Download PDF</a>

如上所示,download 屬性是在瀏覽器上下載文件的最簡單方法。您甚至不需要 JavaScript,因為它是 HTML DOM 的一部分。但是,download 屬性僅適用於現代瀏覽器。 Internet Explorer 不支持。

觸發click 事件

這個想法是通過編程創建一個錨鏈接,然後觸發 click 事件。此方法對於動態生成的文件 URL 尤其有用。

const download = (path, filename) => {
    // Create a new link
    const anchor = document.createElement('a');
    anchor.href = path;
    anchor.download = filename;

    // Append to the DOM
    document.body.appendChild(anchor);

    // Trigger `click` event
    anchor.click();

    // Remove element from DOM
    document.body.removeChild(anchor);
}; 

// Example download
download('atta-resume.pdf', 'resume.pdf');

上面的示例代碼做了以下事情:

  • 創建一個錨元素(<a> )
  • 設置其目標 URL 和下載屬性值(如果有)
  • 將其附加到正文中
  • 觸發錨點的click 開始下載的事件
  • 最後從正文中刪除錨標記

Blob 和對象 URL

有時,您可能希望使用 JavaScript 將編程生成的數據保存為文件。這就是 Blob 和對象 URL 有用的地方。

一個 Blob object 是一個類文件對象,用於表示原始不可變數據 . Blob 對象包含有關它們存儲的數據的類型和大小的信息,這使得它們對於在瀏覽器中存儲動態內容非常有用。

假設您要將 REST API 返回的 JSON 響應保存為瀏覽器中的文件:

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(json => {
        // TODO: Convert JSON object to blob
    })
    .catch(err => console.error(err));

要從 JSON 數據創建 blob 對象,首先需要將其轉換為 JSON 字符串,然後創建 Blob 的實例 通過使用它的構造函數:

// Convert JSON to string
const data = JSON.stringify(json);

// Create a Blob object
const blob = new Blob([data], { type: 'application/json' });

要將原始 blob 數據轉換為對象 URL,可以使用 URL.createObjectURL() 方法。此方法有助於創建表示 blob 或文件的對象 URL。

下面是創建對象 URL 的樣子:

const url = URL.createObjectURL(blob);

現在我們有了一個對象 URL,我們可以簡單地調用 download() 上面定義的將 JSON 響應保存為文件的方法:

download(url, 'users.json');

默認情況下,無論何時創建對象 URL,它都會在文檔的整個生命週期內保留在 DOM 中。當文檔關閉或重新加載時,瀏覽器會釋放所有的對象 URL。

但是,當不再需要對象 URL 以提高性能和最小化內存使用時,最好釋放它們。要釋放 URL 對象,可以使用 URL.revokeObjectURL() 方法:

URL.revokeObjectURL(url);

這是我們完整的示例代碼的樣子:

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(json => {
        // Convert JSON to string
        const data = JSON.stringify(json);

        // Create a Blob object
        const blob = new Blob([data], { type: 'application/json' });

        // Create an object URL
        const url = URL.createObjectURL(blob);

        // Download file
        download(url, 'users.json');

        // Release the object URL
        URL.revokeObjectURL(url);
    })
    .catch(err => console.error(err));

Tutorial JavaScript 教程
  1. 深入了解 ES6:生成器

  2. 開始使用 Mock Service Worker

  3. Deno 的 OAuth2 示例

  4. 什麼是JS等價於PHP函數number_format?

  5. 如何在 ajax 響應上添加加載..

  6. 在 jQuery 中聲明數組

  7. 您如何在 Express 中進行基於角色的授權?

  1. Poke:一個超級好用的 HTTP 請求庫

  2. 使用自定義鉤子讓表單創建變得輕而易舉

  3. 要成為一名優秀的前端開發人員,你應該學習什麼?

  4. 如何將 Moment.js 時刻轉換為 unix 時間戳

  5. 在網頁中打開多個攝像機

  6. 15 個 JavaScript 字符串函數

  7. LoginID生物認證Web SDK教程

  1. 驗證傳遞給 React 模擬組件的子組件

  2. 構建 Angular Material 13 文件瀏覽/上傳 UI 組件

  3. 利用 react-router v6 管理 Providers

  4. 原版 JavaScript 教程 - 第二部分:使用 JavaScript 進行 CSS 樣式設置