最近我準(zhǔn)備給我的博客主題增加一個(gè)備份主題配置的功能，我使用的方案是通過導(dǎo)出主題的設(shè)置來備份。因?yàn)椴恍枰獙?dǎo)入數(shù)據(jù)庫，所以可以直接通過 JS 獲取表單內(nèi)容，然后導(dǎo)出為 JSON。導(dǎo)入配置也是直接讀取本地的 JSON 文件，然后根據(jù) JSON 的配置信息設(shè)置表單。這里就簡單寫一下 JS 導(dǎo)出和讀取文本文件。

導(dǎo)出

我需要實(shí)現(xiàn)的效果是點(diǎn)擊導(dǎo)出后彈出一個(gè)文件下載對話框，點(diǎn)擊 保存 或 下載 就可以導(dǎo)出文件。

在 HTML5 中 a 標(biāo)簽增加了一個(gè) download 屬性，通過 download 屬性，可以直接通過文件下載對話框來下載瀏覽器能打開的文件。

一般情況下給 a 的 href 指定一張圖片或 MP3 地址，點(diǎn)擊鏈接瀏覽器會(huì)直接讀取文件，而通過 download 屬性，瀏覽器會(huì)直接彈出文件下載對話框。我這里導(dǎo)出文件也會(huì)用到 a 標(biāo)簽的 download 屬性。

下面定義一個(gè)按鈕和一個(gè)鏈接：導(dǎo)出文件

下面是 JS：var btn = document.querySelector("button"); // 選擇按鈕

var link = document.querySelector("a"); // 選擇鏈接

// 用來導(dǎo)出的 JSON

var jsonStr = {

name: "我的博客",

url: "https://www.misterma.com/",

};

// 導(dǎo)出文件按鈕點(diǎn)擊

btn.onclick = function () {

jsonStr = JSON.stringify(jsonStr); // 把 JSON 對象轉(zhuǎn)換為字符串

var blob = new Blob([jsonStr]); // 創(chuàng)建 blob 對象

link.href = URL.createObjectURL(blob); // 創(chuàng)建一個(gè) URL 對象并傳給 a 的 href

link.download = "config.json"; // 設(shè)置下載的默認(rèn)文件名

link.click(); // 點(diǎn)擊下載鏈接

};

下面是用到的一些對象和方法說明：

JSON.stringify() 方法：

把 JSON 對象轉(zhuǎn)換為 JSON 字符串，如果你導(dǎo)出的直接就是字符串的話，就可以不用轉(zhuǎn)換。

Blob() 構(gòu)造函數(shù)：

Blob 對象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對象。

Blob 構(gòu)造函數(shù)可以返回一個(gè) Blob 對象，參數(shù)就是要轉(zhuǎn)換的內(nèi)容數(shù)組。

URL.createObjectURL() 方法：

創(chuàng)建一個(gè) URL 對象，返回創(chuàng)建后的 URL 對象，參數(shù)可以是 Blob 或 File 對象。

上面把創(chuàng)建的 URL 對象 賦給了 a 的 href。

點(diǎn)擊 導(dǎo)出文件 按鈕后就會(huì)彈出一個(gè)文件下載的對話框，默認(rèn)的文件名是 config.json，點(diǎn)擊保存或下載就可以導(dǎo)出文件了。

導(dǎo)入

導(dǎo)入可以通過文件表單和拖放的方式來選擇文件，我這里使用的是文件表單。

下面是一個(gè)文件表單：

如果想美化文件表單 可以把文件表單隱藏，通過按鈕來調(diào)用文件表單的點(diǎn)擊方法。

下面是 JS：var fileSelect = document.querySelector('#file-select'); // 選擇文件表單

// 文件表單的內(nèi)容改變，也就是文件選擇完成

fileSelect.onchange = function () {

if (this.value === '' || this.files.length < 1) {

return false; // 如果沒有選擇文件就什么也不做

}

var reader = new FileReader(); // 創(chuàng)建 FileReader對象

reader.readAsText(this.files[0]); // 把文件讀取為字符串

// 文件加載完成

reader.onload = function(ev) {

var jsonStr = ev.target.result; // 把字符串傳給 jsonStr

jsonStr = JSON.parse(jsonStr); // 把 JSON 字符串轉(zhuǎn)換為 JSON 對象

console.log(jsonStr); // 在控制臺(tái)輸出 JSON

};

};

下面是用到的一些對象和方法說明：

FileReader() 對象：FileReader 對象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

FileReader 的 readAsText() 方法：

把文件讀取為字符串。

FileReader 的 onload 事件：

文件讀取完成后會(huì)觸發(fā) onload 事件，函數(shù)可以接收一個(gè)事件對象，事件對象的 result 屬性就是讀取的文件內(nèi)容。

JSON.parse() 方法：

把 JSON 字符串轉(zhuǎn)換為 JSON 對象，參數(shù)是要轉(zhuǎn)換的 JSON 字符串，返回轉(zhuǎn)換后的 JSON 對象。

之前寫過一篇 預(yù)覽本地圖片 的教程，也是通過 FileReader 來讀取文件。

以上就是 JavaScript 導(dǎo)出和讀取文件的簡單演示，上面的導(dǎo)出文件可以導(dǎo)出任何文件，不局限于 JSON。導(dǎo)入文件可以導(dǎo)入任何瀏覽器能讀取的文件，即便是瀏覽器無法讀取的文件也可以通過字符串的方式讀取文件。

鏈接的 download 屬性是 HTML5 中加入的，目前 IE 系列的瀏覽器是不支持的，即便是 IE 11 也不支持，微軟的瀏覽器需要 Edge 才可以用。

版權(quán)聲明：本文為原創(chuàng)文章，版權(quán)歸 Mr. Ma's Blog 所有，轉(zhuǎn)載請聯(lián)系博主獲得授權(quán)。

如果對本文有什么問題或疑問都可以在評論區(qū)留言，我看到后會(huì)盡量解答。

總結(jié)

以上是生活随笔為你收集整理的读取json本地js处理输出html,JavaScript 通过浏览器导出和读取本地 JSON 文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。