最近我準備給我的博客主題增加一個備份主題配置的功能，我使用的方案是通過導出主題的設置來備份。因為不需要導入數據庫，所以可以直接通過 JS 獲取表單內容，然后導出為 JSON。導入配置也是直接讀取本地的 JSON 文件，然后根據 JSON 的配置信息設置表單。這里就簡單寫一下 JS 導出和讀取文本文件。

導出

我需要實現的效果是點擊導出后彈出一個文件下載對話框，點擊 保存 或 下載 就可以導出文件。

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

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

下面定義一個按鈕和一個鏈接：導出文件

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

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

// 用來導出的 JSON

var jsonStr = {

name: "我的博客",

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

};

// 導出文件按鈕點擊

btn.onclick = function () {

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

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

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

link.download = "config.json"; // 設置下載的默認文件名

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

};

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

JSON.stringify() 方法：

把 JSON 對象轉換為 JSON 字符串，如果你導出的直接就是字符串的話，就可以不用轉換。

Blob() 構造函數：

Blob 對象表示一個不可變、原始數據的類文件對象。

Blob 構造函數可以返回一個 Blob 對象，參數就是要轉換的內容數組。

URL.createObjectURL() 方法：

創建一個 URL 對象，返回創建后的 URL 對象，參數可以是 Blob 或 File 對象。

上面把創建的 URL 對象 賦給了 a 的 href。

點擊 導出文件 按鈕后就會彈出一個文件下載的對話框，默認的文件名是 config.json，點擊保存或下載就可以導出文件了。

導入

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

下面是一個文件表單：

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

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

// 文件表單的內容改變，也就是文件選擇完成

fileSelect.onchange = function () {

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

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

}

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

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

// 文件加載完成

reader.onload = function(ev) {

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

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

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

};

};

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

FileReader() 對象：FileReader 對象允許 Web 應用程序異步讀取存儲在用戶計算機上的文件(或原始數據緩沖區)的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

FileReader 的 readAsText() 方法：

把文件讀取為字符串。

FileReader 的 onload 事件：

文件讀取完成后會觸發 onload 事件，函數可以接收一個事件對象，事件對象的 result 屬性就是讀取的文件內容。

JSON.parse() 方法：

把 JSON 字符串轉換為 JSON 對象，參數是要轉換的 JSON 字符串，返回轉換后的 JSON 對象。

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

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

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

版權聲明：本文為原創文章，版權歸 Mr. Ma's Blog 所有，轉載請聯系博主獲得授權。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。