브라우저에서 JSON 개체를 파일로 다운로드합니다.

브라우저에서 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(순수 JS, 여기서는 jQuery가 아님):

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 오브젝트입니다.또한 "syslog.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에게 돌아간다**

다음을 사용할 수 있습니다.

• 네이티브 JavaScript API의 Blob 컨스트럭터 및
• 파일 세이버.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'
});

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

JSON을 예쁘게 인쇄하고 싶은 경우는, 다음의 회답에 따라 주세요.

JSON.stringify(data,undefined,2)

이것은 순수 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

최신 브라우저만을 대상으로 하는 심플하고 깨끗한 솔루션:

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

다음과 같은 것이 도움이 되었습니다.

/* 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");

2021년 ES6+ 버전, 1MB 제한 없음:

이것은 @maia 버전에서 수정되었으며, 사용되지 않는 initMouseEvent로 업데이트된 최신 Javascript입니다.new MouseEvent()일반적으로 코드가 개선되었습니다.

const saveTemplateAsFile = (filename, dataObjToWrite) => {
    const blob = new Blob([JSON.stringify(dataObjToWrite)], { type: "text/json" });
    const link = document.createElement("a");

    link.download = filename;
    link.href = window.URL.createObjectURL(blob);
    link.dataset.downloadurl = ["text/json", link.download, link.href].join(":");

    const evt = new MouseEvent("click", {
        view: window,
        bubbles: true,
        cancelable: true,
    });

    link.dispatchEvent(evt);
    link.remove()
};

개체를 전달하려는 경우:

saveTemplateAsFile("filename.json", myDataObj);

저는 최근에 큰 형식의 모든 값의 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');

엣지에서의 파일명과 확장자에는 문제가 있었습니다만, 기입 시점에서는, 이것은 수정 예정의 엣지에서의 버그로 생각되고 있었습니다.

이게 도움이 됐으면 좋겠는데

download링크 속성은 새로운 것으로 Internet Explorer에서 지원되지 않습니다(여기에 있는 호환성 표 참조).이 문제에 대한 크로스 브라우저 솔루션에 대해서는 FileSaver.js를 참조해 주십시오.

    downloadJsonFile(data, filename: string){
        // Creating a blob object from non-blob data using the Blob constructor
        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        // Create a new anchor element
        const a = document.createElement('a');
        a.href = url;
        a.download = filename || 'download';
        a.click();
        a.remove();
      }

Blob을 사용하여 파일을 쉽게 자동 다운로드하여 첫 번째 param download Json File로 전송할 수 있습니다.filename은 설정하려는 파일 이름입니다.

반응: 렌더링 메서드에서 원하는 위치에 추가합니다.

• 상태의 객체:

<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 및 style은 옵션입니다.필요에 따라 스타일을 변경합니다.

MIME 타입을 .MIME 타입은 "Da" MIME은 "MIME"입니다.exportData = 'data:application/octet-stream;charset=utf-8,';

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

파일명보다 콘솔스니펫(레이저)을 사용하는 경우는, 다음과 같이 할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser