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

十方發表於2022-06-18
JSON

有時候在前端開發過程中，可能遇到這樣的需求場景：需要將頁面上的文字內容下載到檔案中，內容可能是某個大的文字欄位，比如部落格文章，也可能是後端介面返回的 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', '測試')

執行後，可以看到瀏覽器會下載一個名為 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"
}

相關文章