3

현재 Google 크롬 확장 프로그램을 만들고 있는데 다운로드 할 수있는 JSON 파일 (내보내기)을 만들 수 있는지, 사용자가 확장 프로그램을 열고 JSON 파일을 구문 분석 할 수있는 버튼을 만들 수 있는지 궁금합니다. 그들은 로컬 파일 시스템이나 USB 스틱에 저장했습니다 (임포트)?Google 크롬 확장 프로그램을 사용하여 JSON 파일을 가져 오거나 내보내시겠습니까?

로컬 파일 시스템에서 각 JSON을 파싱하는 것은 단순히 각 키 - 값 쌍을 읽은 다음 데이터로 무언가를하는 것입니다. 문자열 만 처리하면되므로 복잡하지 않습니다.

편집 : ** 사용자의 다운로드 경로 변경에 관심이 없기 때문에 제 질문에 this one이 중복되지 않습니다. 내가 원하는 것은 그들이 동의 한 상태에서 일반 다운로드 디렉토리 (Filesaver.js가 할 수있는)로 파일을 다운로드 할 수있게하는 것입니다. 또한 해당 게시물은 가져 오기에 대해 아무 것도 말하지 않습니다.

+1

는 JSON 파일을 저장 (수신기에서) 이벤트를

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

가져 오기 기능을 가져 오기위한 트리거로 사용됩니다 당신은 분석 수행 할 작업에 따라 달라집니다 json –

+0

@Daniel_L 팁에 감사드립니다. Filesaver.js는 JSON 파일 저장에 적합하지만 사용자가 만든 파일을 여는 방법은 무엇입니까? – user5508297

+0

질문을 편집하여 업로드 된 json 파일로 수행 할 작업을 정확히 나타내 줄 수 있습니까 –

답변

8

당신은 가짜 링크 가상의 배열 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"/> 
을가 보이지 않도록

스크립트

당신이 스타일을 원하는 수있는 메이크업 버튼 fakeImp (또는 요소), 것을
importOrig.addEventListener("change", importFun, false); 

그리고는, filesaver.js와 사소한

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

이것은 문제에 대한 최선의 대답입니다. – Whitecat

관련 문제