最近我准备给我的博客主题增加一个备份主题配置的功能，我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库，所以可以直接通过 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 所有，转载请联系博主获得授权。

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。