使用 Google Chrome 扩展导入/导出 JSON 文件？答案

【问题标题】：Using Google Chrome extensions to import/export JSON files?使用 Google Chrome 扩展导入/导出 JSON 文件？
【发布时间】：2016-12-14 11:06:56
【问题描述】：

我现在正在创建一个 Google Chrome 扩展程序，我想知道它是否可以创建 JSON 文件以供下载（导出）并创建一个按钮，用户可以在其中制作扩展程序打开并解析他们保存在本地文件系统或 U 盘上的 JSON 文件（import）？

从本地文件系统解析每个 JSON 只需读取每个键值对并对数据进行处理。它只需要处理字符串，所以没什么复杂的。

**编辑：**我的问题不是 this one 的重复，因为我对更改用户的下载路径不感兴趣。我想要的只是让他们能够在他们同意的情况下将文件下载到他们的正常下载目录（Filesaver.js 可以这样做）。另外，那篇文章没有提到导入。

【问题讨论】：

用 filesaver.js 保存一个 json 文件很简单，取决于你想用解析后的 json 做什么
@Daniel_L 感谢您的提示。 Filesaver.js 看起来很适合保存 JSON 文件，但打开用户创建的文件呢？
您可以编辑您的问题以准确说明您想对上传的 json 文件做什么
从字面上回答这个问题：是的，这是可能的。附言看起来像是在没有用谷歌搜索现有解决方案和示例的情况下提出问题。
我猜是这样的：download 按钮，Upload 按钮。

标签： javascript json google-chrome google-chrome-extension google-chrome-app

【解决方案1】：

您可以伪造“下载”虚拟数组MyData 或其他任何内容的链接：

var MyArray = [elem1, elem2, ....];
var _myArray = JSON.stringify(MyArray , null, 4); //indentation in json format, human readable

var vLink = document.createElement('a'),
vBlob = new Blob([_myArray], {type: "octet/stream"}),
vName = 'watever_you_like_to_call_it.json',
vUrl = window.URL.createObjectURL(vBlob);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vName );
vLink.click();

这会将您的数组导出/下载到名为 vName 变量的 json 文件中。

如果您想导入/读取文件：
创建输入元素（类型=文件）并使其不可见（这里我有 html 元素，然后在脚本中添加 js 侦听器）

<input type="file" id="importOrig" accept=".json" style="display:none"/>

脚本

importOrig.addEventListener("change", importFun, false);

制作按钮fakeImp（或任何元素），您可以根据需要设置样式并将其用作导入事件的触发器

fakeImp.onclick = function () {importOrig.click()}

导入函数（来自监听器）

function importFun(e) {
  var files = e.target.files, reader = new FileReader();
  reader.onload = _imp;
  reader.readAsText(files[0]);
}

function _imp() {
  var _myImportedData = JSON.parse(this.result);
  //here is your imported data, and from here you should know what to do with it (save it to some storage, etc.)

  ......
  importOrig.value = ''; //make sure to clear input value after every import
}

【讨论】：

这是迄今为止该问题的最佳答案。