目录

最近我准备给我的博客主题增加一个备份主题配置的功能,我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库,所以可以直接通过 JS 获取表单内容,然后导出为 JSON。导入配置也是直接读取本地的 JSON 文件,然后根据 JSON 的配置信息设置表单。这里就简单写一下 JS 导出和读取文本文件。

导出

我需要实现的效果是点击导出后弹出一个文件下载对话框,点击 保存 或 下载 就可以导出文件。

在 HTML5 中 a 标签增加了一个 download 属性,通过 download 属性,可以直接通过文件下载对话框来下载浏览器能打开的文件。

一般情况下给 ahref 指定一张图片或 MP3 地址,点击链接浏览器会直接读取文件,而通过 download 属性,浏览器会直接弹出文件下载对话框。我这里导出文件也会用到 a 标签的 download 属性。

下面定义一个按钮和一个链接:

<button type="button">导出文件</button>
<a href="#"></a>

下面是 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 对象,参数可以是 BlobFile 对象。

上面把创建的 URL 对象 赋给了 ahref

点击 导出文件 按钮后就会弹出一个文件下载的对话框,默认的文件名是 config.json,点击保存或下载就可以导出文件了。

导入

导入可以通过文件表单和拖放的方式来选择文件,我这里使用的是文件表单。

下面是一个文件表单:

<input type="file" id="file-select">

如果想美化文件表单 可以把文件表单隐藏,通过按钮来调用文件表单的点击方法。

下面是 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 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

FileReaderreadAsText() 方法:

把文件读取为字符串。

FileReaderonload 事件:

文件读取完成后会触发 onload 事件,函数可以接收一个事件对象,事件对象的 result 属性就是读取的文件内容。

JSON.parse() 方法:

把 JSON 字符串转换为 JSON 对象,参数是要转换的 JSON 字符串,返回转换后的 JSON 对象。

之前写过一篇 预览本地图片 的教程,也是通过 FileReader 来读取文件。

以上就是 JavaScript 导出和读取文件的简单演示,上面的导出文件可以导出任何文件,不局限于 JSON。导入文件可以导入任何浏览器能读取的文件,即便是浏览器无法读取的文件也可以通过字符串的方式读取文件。

链接的 download 属性是 HTML5 中加入的,目前 IE 系列的浏览器是不支持的,即便是 IE 11 也不支持,微软的浏览器需要 Edge 才可以用。

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/867/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月04日 ©著作权归作者所有

发表评论

正在加载 Emoji