JS實現將文字或JSON內容下載到檔案中

十方 發表於 2022-06-18

有時候在前端開發過程中,可能遇到這樣的需求場景:需要將頁面上的文字內容下載到檔案中,內容可能是某個大的文字欄位,比如部落格文章,也可能是後端介面返回的 JSON 資料。

1、下載文字

那麼需要如何實現 JS 下載文字內容呢?可以藉助於 Blob 物件和 a 標籤的 download屬性 來實現,具體程式碼如下:

Blob 物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取,也可以轉換成 ReadableStream 來用於資料操作;

a 標籤的 download 屬性是 HTML5 中新增的,用來直接進行檔案下載;

function downloadText(fileName, text) {
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob([text]);
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    // 設定 download 屬性
    saveLink.download = fileName;
    saveLink.click();
}

下面來測試一下,可以直接在 Chrome 的 console 中進行測試

downloadText('test.txt', '測試')

JS實現將文字或JSON內容下載到檔案中

執行後,可以看到瀏覽器會下載一個名為 test.txt 的檔案

2、下載JSON

有時候後端介面返回了一個JSON物件,為了方便檢視和核對資料,可能想將其下載到檔案中,那麼只需要將下載文字的方法稍微改造一下即可,具體程式碼如下:

function downloadJson(fileName, json) {
    const jsonStr = (json instanceof Object) ? JSON.stringify(json) : json;
    
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob([jsonStr]);
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    saveLink.download = fileName;
    saveLink.click();
}

下面來測試一下

downloadJson('test.json', {id: 1, name: 'js'})

執行後,瀏覽器會自動下載一個名為 test.json 的檔案,其內容如下:

{"id":1,"name":"js"}

3、下載JSON並格式化

有的時候可能希望儲存到檔案中的 json 資料是格式化的,這樣方便檢視,那麼只需要稍微調整一下 JSON.stringify() 方法即可,先來看看 JSON.stringify() 方法的定義

JSON.stringify(value[, replacer [, space]])

value

  • 將要序列化成 一個 JSON 字串的值。

replacer 可選

  • 如果該引數是一個函式,則在序列化過程中,被序列化的值的每個屬性都會經過該函式的轉換和處理;如果該引數是一個陣列,則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中;如果該引數為 null 或者未提供,則物件所有的屬性都會被序列化。

space 可選

  • 指定縮排用的空白字串,用於美化輸出(pretty-print);如果引數是個數字,它代表有多少的空格;上限為 10。該值若小於 1,則意味著沒有空格;如果該引數為字串(當字串長度超過 10 個字母,取其前 10 個字母),該字串將被作為空格;如果該引數沒有提供(或者為 null),將沒有空格。

如果想要格式化 JSON,那麼可以傳入一個 space 引數,具體如下:

JSON.stringify(json, null, 4);

除了使用4個空格外,還可以製表符(\t)來縮排,如下:

JSON.stringify(json, null, '\t');

下載格式化JSON方法修改如下:

function downloadJson(fileName, json) {
    const jsonStr = (json instanceof Object) ? JSON.stringify(json, null, 4) : json;
    
    const url = window.URL || window.webkitURL || window;
    const blob = new Blob([jsonStr]);
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    saveLink.href = url.createObjectURL(blob);
    saveLink.download = fileName;
    saveLink.click();
}

下面來測試一下

downloadJson('test.json', {id: 1, name: 'js'})

執行後,瀏覽器會自動下載一個名為 test.json 的檔案,其內容如下:

{
    "id": 1,
    "name": "js"
}