JSON nesnesini tarayıcıdan bir dosya olarak indir

Kullanıcıların csv dosyasında veri dizeleri indirmesine izin vermek için aşağıdaki kodu var.

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

İstemci kodu çalıştırırsa boş sayfa oluşturur ve csv dosyasındaki verileri indirmeye başlar.

Bu yüzden JSON nesnesi ile bunu yapmaya çalıştım

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

Ancak yalnızca JSON verilerinin görüntülendiği bir sayfa görüyorum, indirmiyorum.

Biraz araştırma yaptım ve bunun işe yaradığını iddia ediyor ama kodumda herhangi bir fark görmüyorum.

Kodumda bir şey mi eksik?

Sorumu okuduğunuz için teşekkürler :)

Uygulamam için şu şekilde çözdüm:

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

JS (saf JS, burada jQuery değil):

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

Bu durumda, storageObjsaklamak istediğiniz js nesnesidir ve "scene.json" yalnızca sonuçta elde edilen dosya için örnek bir addır.

Bu yaklaşım, önerilen diğer yaklaşımlara göre aşağıdaki avantajlara sahiptir:

• HTML öğesinin tıklanmasına gerek yoktur
• Sonuç istediğiniz gibi adlandırılacaktır
• jQuery gerekmez

Ben js bir noktada otomatik olarak indirme tetiklemek istiyorum beri açık tıklama olmadan bu davranış gerekli.

JS çözümü (HTML gerekmez):

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

Bir cevap buldum.

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

benim için iyi çalışıyor gibi görünüyor.

** Tüm krediler yukarıdaki kodun yazarı olan @ cowboy-ben-alman'a gider **

Bu saf bir JS versiyonu olacak (kovboydan uyarlanmış):

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

Kullanmayı deneyebilirsiniz:

• yerel JavaScript API'sının Blob yapıcısını ve
• FileSaver.js saveAs() yöntemi

Herhangi bir HTML öğesiyle uğraşmanıza gerek yok.

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'u oldukça yazdırmak istiyorsanız, bu cevap başına şunları kullanabilirsiniz:

JSON.stringify(data,undefined,2)

Aşağıdakiler benim için çalıştı:

/* 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)
}

ve sonra böyle çağırmak için

saveJSON(myJsonObject, "saved_data.json");

Son zamanlarda büyük bir formun tüm değerlerinin bir json dosyasını indirmek bir düğme oluşturmak zorunda kaldı. IE / Edge / Chrome ile çalışmak için buna ihtiyacım vardı. Ben de öyle yaptım:

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

Dosya adı ve uzantı uzantısı ile ilgili bir sorun vardı, ancak yazma sırasında bu, düzeltilmesi gereken Edge ile ilgili bir hata gibi görünüyordu.

Umarım bu birine yardımcı olur

Yalnızca modern tarayıcıları hedefleyen kullanıcılar için basit, temiz bir çözüm:

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

downloadBağlantıların özelliği (uyumluluk tabloya bakınız yeni olup Internet Explorer'da desteklenir ise burada ). Bu soruna çapraz tarayıcı çözümü için FileSaver.js'ye bir göz atacağım

React : bunu render yönteminizde istediğiniz yere ekleyin.

• Nesne durumda :

<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>

• Sahne içindeki nesne :

<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 ve stil isteğe bağlıdır, stili ihtiyaçlarınıza göre değiştirin.

Başka bir MIME türü ayarlamayı deneyin: exportData = 'data:application/octet-stream;charset=utf-8,';

Ancak kaydet iletişim kutusunda dosya adıyla ilgili sorunlar olabilir.

Konsol snippet, raser, dosya adından daha fazla tercih ederseniz, bunu yapabilirsiniz:

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