JS實現(xiàn)將文本或JSON內(nèi)容下載到文件中

有時候在前端開發(fā)過程中，可能遇到這樣的需求場景：需要將頁面上的文本內(nèi)容下載到文件中，內(nèi)容可能是某個大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 數(shù)據(jù)。

1、下載文本

那么需要如何實現(xiàn) JS 下載文本內(nèi)容呢？可以借助于 Blob 對象和 a 標(biāo)簽的 download屬性 來實現(xiàn)，具體代碼如下：

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取，也可以轉(zhuǎn)換成 ReadableStream 來用于數(shù)據(jù)操作；

a 標(biāo)簽的 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);
    // 設(shè)置 download 屬性
    saveLink.download = fileName;
    saveLink.click();
}

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

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

運行后，可以看到瀏覽器會下載一個名為 test.txt 的文件

2、下載JSON

有時候后端接口返回了一個JSON對象，為了方便查看和核對數(shù)據(jù)，可能想將其下載到文件中，那么只需要將下載文本的方法稍微改造一下即可，具體代碼如下：

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 的文件，其內(nèi)容如下：

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

3、下載JSON并格式化

有的時候可能希望保存到文件中的 json 數(shù)據(jù)是格式化的，這樣方便查看，那么只需要稍微調(diào)整一下 JSON.stringify() 方法即可，先來看看 JSON.stringify() 方法的定義

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

value

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

• 如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理；如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數(shù)為 null 或者未提供，則對象所有的屬性都會被序列化。

• 指定縮進用的空白字符串，用于美化輸出（pretty-print）；如果參數(shù)是個數(shù)字，它代表有多少的空格；上限為 10。該值若小于 1，則意味著沒有空格；如果該參數(shù)為字符串（當(dāng)字符串長度超過 10 個字母，取其前 10 個字母），該字符串將被作為空格；如果該參數(shù)沒有提供（或者為 null），將沒有空格。

JSON.stringify(json, null, 4);

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

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'})

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