使用Google Chrome扩展程序导入/导出JSON文件？ [英] Using Google Chrome extensions to import/export JSON files?

问题描述

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

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

**编辑：**我的问题不是这一个，因为我不想更改用户的下载路径。我只想让他们在他们的同意下将文件下载到正常的下载目录（Filesaver.js可以执行的操作）。您可以伪造链接到下载虚构数组 或其他，：

  var MyArray = [elem1，elem2，....]; 
 var _myArray = JSON.stringify（MyArray，null，4）; json格式的缩进，可读性更好
 
 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 变量。



---





如果您想导入/读取文件：

create输入元素（类型=文件），并使其不可见（在这里我有HTML元素，然后在脚本中添加js监听器）

pre $ code >< input type =fileid =importOrigaccept =。jsonstyle =display：none/>


脚本

  importOrig.addEventListener（change，importFun，false）; 
  

make按钮 fakeImp （或任何元素）你希望和那将被用作导入事件的触发器

  fakeImp.onclick = function（）{importOrig.click（）} 
  

导入函数（来自侦听器）

  function importFun（e）{
 var files = e.target.files，reader = new FileReader（）; 
 reader.onload = _imp; 
 reader.readAsText（files [0]）; 
} 
 
函数_imp（）{
 var _myImportedData = JSON.parse（this.result）; 
 //这里是你导入的数据，从这里你应该知道如何处理它（保存到一些存储等）
 
 ...... 
 importOrig.value =''; //确保每次输入后清除输入值
} 
  

I'm creating a Google Chrome extension at the moment and I was wondering if it's possible for it to both create JSON files to download (export) and create a button where users can make the extension open and parse JSON files that they have saved in their local file system or on a USB stick (import)?

The parsing of each JSON from the local file system would simply involve reading off each key-value pair and doing something with the data. It would only have to deal with strings, so nothing complicated.

**EDIT: **My question is not a duplicate of this one because I'm not interested in changing the user's download path. All I want is to enable them to, with their consent, download a file to their normal download directory (which Filesaver.js can do). Plus, that post says nothing about importing.

解决方案

You can fake link to "download" imaginary array MyData or whatever,:

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();

this will export/download your array into json file named as vName variable.

---

If you wish to import/read file:
create input element (type=file) and make it invisible (here I'm having html element and then adding js listener in script)

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

script

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

make button fakeImp (or any element), that you can style as you wish and that will be used as trigger for importing event

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

import function (from listener)

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
}

这篇关于使用Google Chrome扩展程序导入/导出JSON文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！