브라우저에서 JSON 객체를 파일로 다운로드

사용자가 CSV 파일로 데이터 문자열을 다운로드 할 수 있도록 다음 코드가 있습니다.

exportData = 'data:text/csv;charset=utf-8,';
exportData += 'some csv strings';
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

클라이언트가 코드를 실행하면 빈 페이지가 생성되고 csv 파일로 데이터 다운로드가 시작됩니다.

그래서 나는 JSON 객체로 이것을 시도했다.

exportData = 'data:text/json;charset=utf-8,';
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

그러나 JSON 데이터가 표시된 페이지 만 표시되며 다운로드하지는 않습니다.

나는 약간의 연구를 거쳤으며 이것이 작동한다고 주장하지만 내 코드에는 아무런 차이가 없다.

코드에 뭔가 빠졌습니까?

내 질문을 읽어 주셔서 감사합니다 :)

이것이 내 응용 프로그램에서 해결 한 방법입니다.

HTML : <a id="downloadAnchorElem" style="display:none"></a>

JS (여기서 jQuery가 아닌 순수 JS) :

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href",     dataStr     );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

이 경우, storageObj저장하려는 js 객체이고 "scene.json"은 결과 파일의 예제 이름 일뿐입니다.

이 방법은 다른 제안 된 방법에 비해 다음과 같은 장점이 있습니다.

• HTML 요소를 클릭 할 필요가 없습니다
• 원하는대로 결과 이름이 지정됩니다
• jQuery가 필요하지 않습니다

js의 어느 시점에서 다운로드를 자동으로 트리거하려고하기 때문에 명시 적 클릭 없이이 동작이 필요했습니다.

JS 솔루션 (HTML 필요 없음) :

  function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }

답을 찾았습니다.

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#container');

나를 위해 잘 작동하는 것 같습니다.

** 모든 크레딧은 위 코드의 작성자 인 @ cowboy-ben-alman에게 전달됩니다 **

이것은 순수한 JS 버전입니다 (카우보이에서 적응).

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

var a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

http://jsfiddle.net/sz76c083/1

당신은 시도해 볼 수 있습니다 :

• 기본 JavaScript API의 Blob 생성자
• FileSaver.js의 saveAs() 방법

HTML 요소를 전혀 처리 할 필요가 없습니다.

var data = {
    key: 'value'
};
var fileName = 'myData.json';

// Create a blob of the data
var fileToSave = new Blob([JSON.stringify(data)], {
    type: 'application/json',
    name: fileName
});

// Save the file
saveAs(fileToSave, fileName);

이 답변에 따라 JSON을 예쁘게 인쇄하려면 다음을 사용할 수 있습니다.

JSON.stringify(data,undefined,2)

다음은 나를 위해 일했습니다.

/* function to save JSON to file from browser
* adapted from http://bgrins.github.io/devtools-snippets/#console-save
* @param {Object} data -- json object to save
* @param {String} file -- file name to save to 
*/
function saveJSON(data, filename){

    if(!data) {
        console.error('No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
}

그런 다음 그렇게 호출

saveJSON(myJsonObject, "saved_data.json");

나는 최근에 큰 형태의 모든 값의 json 파일을 다운로드하는 버튼을 만들어야했습니다. IE / Edge / Chrome과 함께 작동하려면 이것이 필요했습니다. 이것이 내가 한 일입니다.

function download(text, name, type)
    {
        var file = new Blob([text], {type: type});
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE)
        {
            window.navigator.msSaveOrOpenBlob(file, name);
        }
        else
        {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(file);
            a.download = name;
            a.click();
        }
     }

download(jsonData, 'Form_Data_.json','application/json');

edge에서 파일 이름과 확장명에 한 가지 문제가 있었지만 작성 당시에는 Edge로 인해 버그가 수정 된 것으로 보입니다.

이것이 누군가를 돕기를 바랍니다.

최신 브라우저만을 대상으로하는 사람들을위한 간단하고 깨끗한 솔루션 :

function downloadTextFile(text, name) {
  const a = document.createElement('a');
  const type = name.split(".").pop();
  a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
  a.download = name;
  a.click();
}

downloadTextFile(JSON.stringify(myObj), 'myObj.json');

download링크 의 속성은 새로운 기능이며 Internet Explorer에서는 지원되지 않습니다 ( 여기 의 호환성 표 참조 ). 이 문제에 대한 크로스 브라우저 솔루션을 위해 FileSaver.js를 살펴 보겠습니다.

반응 : 렌더 메소드에서 원하는 곳에 추가하십시오.

• 객체 상태 :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.state.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

• 소품의 객체 :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.props.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

className 및 스타일은 선택 사항이므로 필요에 따라 스타일을 수정하십시오.

다른 MIME 유형을 설정하십시오. exportData = 'data:application/octet-stream;charset=utf-8,';

그러나 저장 대화 상자에서 파일 이름에 문제가있을 수 있습니다.

파일 이름보다 콘솔 스 니펫, raser를 선호하는 경우 다음을 수행 할 수 있습니다.

window.open(URL.createObjectURL(
    new Blob([JSON.stringify(JSON)], {
      type: 'application/binary'}
    )
))