3

Ich erstelle derzeit eine Google Chrome-Erweiterung und frage mich, ob es möglich ist, JSON-Dateien zum Download zu erstellen (export) und eine Schaltfläche zu erstellen, mit der Benutzer die Erweiterung öffnen und JSON-Dateien analysieren können sie haben in ihrem lokalen Dateisystem oder auf einem USB-Stick gespeichert (import)?Verwenden von Google Chrome-Erweiterungen zum Importieren/Exportieren von JSON-Dateien?

Das Parsen jedes JSON aus dem lokalen Dateisystem würde einfach das Lesen jedes Schlüssel-Wert-Paares und das Ausführen von etwas mit den Daten beinhalten. Es hätte nur mit Strings zu tun, also nichts kompliziertes.

** EDIT: ** Meine Frage ist kein Duplikat von this one, weil ich nicht daran interessiert bin, den Downloadpfad des Benutzers zu ändern. Alles, was ich will, ist es, ihnen zu ermöglichen, mit ihrer Zustimmung eine Datei in ihr normales Download-Verzeichnis herunterzuladen (was FileSaver.js tun kann). Außerdem sagt dieser Beitrag nichts über den Import aus.

+1

eine json Datei zu speichern ist trivial mit filesaver.js, hängt davon ab, was Sie wollen mit der analysiert zu tun json –

+0

@Daniel_L danke für den Tipp. Filesaver.js eignet sich hervorragend zum Speichern von JSON-Dateien, aber was ist mit dem Öffnen benutzerdefinierter Dateien? – user5508297

+0

können Sie Ihre Frage bearbeiten, um genau anzugeben, was Sie mit der hochgeladenen JSON-Datei machen wollen –

Antwort

8

Sie können gefälschten Link auf "Download" imaginäre Array MyData oder was auch immer ,:

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

diese exportieren/laden Sie Ihre Array in JSON-Datei als vName Variable mit dem Namen.


Wenn Sie importieren möchten/Lese-Datei:
erstellen Eingabeelement (type = file) und unsichtbar machen (hier ich html-Element habe und dann das Hinzufügen js Zuhörer in Skript)

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

Skript

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

make Taste fakeImp (oder jedes Element), dass Sie Stil können, wie Sie möchten und dass als Trigger für den Import Ereignis

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

Importfunktion (von Hörern) verwendet werden

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 
} 
+1

Dies ist bei weitem die beste Antwort auf das Problem. – Whitecat