Download objek JSON sebagai file dari browser

Saya punya kode berikut untuk membiarkan pengguna men-download data string dalam file csv.

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

Ia bekerja dengan baik bahwa jika klien menjalankan kode ini menghasilkan halaman kosong dan mulai men-download data dalam file csv.

Jadi saya mencoba untuk melakukan hal ini dengan objek JSON seperti

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

Tapi aku hanya melihat sebuah halaman dengan JSON data yang ditampilkan pada itu, tidak men-download.

Aku pergi melalui beberapa penelitian dan ini klaim untuk bekerja tapi aku don't melihat perbedaan apapun untuk kode saya.

Aku kehilangan sesuatu dalam kode saya?

Terima kasih untuk membaca pertanyaan saya:)

Community
Pertanyaan edit 23 Mei 2017 в 11:47
Pemrograman
javascript json
1 November 2013 в 5:42
8 tayangan
Larutan

Ini adalah bagaimana saya soal itu bagi saya aplikasi:

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

JS (JS murni, tidak jQuery di sini):

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

Dalam hal ini, storageObj adalah js objek yang anda ingin menyimpan, dan "adegan.json" ini hanya sebuah contoh nama untuk file yang dihasilkan.

Pendekatan ini memiliki beberapa keuntungan atas lainnya diusulkan:

  • Tidak ada elemen HTML yang perlu diklik
  • Hasil akan diberi nama seperti yang anda inginkan
  • tidak ada jQuery yang dibutuhkan

Saya membutuhkan perilaku ini tanpa eksplisit mengklik karena saya ingin memicu men-download secara otomatis di beberapa titik dari js.

JS solusi (HTML tidak diperlukan):

  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();
  }
bformet
Jawaban edit 28 Mei 2018 в 8:12
Komentar (12)

Menemukan sebuah jawaban.

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

tampaknya bekerja dengan baik bagi saya.

Semua kredit pergi ke @koboi-ben-alman, yang merupakan penulis dari kode di atas

Eugene Yu
Jawaban edit 6 Januari 2015 в 11:32
Komentar (3)

Ini akan menjadi murni JS versi (diadaptasi dari cowboy's):

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][1]

Komentar (4)

Anda bisa mencoba menggunakan:

Tidak perlu berurusan dengan setiap elemen HTML sama sekali. 

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

Jika anda ingin cantik mencetak JSON, per jawaban, anda bisa menggunakan:

JSON.stringify(data,undefined,2)
user1063287
Jawaban edit 14 September 2018 в 10:47
Komentar (4)

Berikut ini bekerja untuk saya: 

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

dan kemudian menyebutnya seperti begitu

saveJSON(myJsonObject, "saved_data.json");
Komentar (1)

Saya baru-baru ini untuk membuat sebuah tombol yang akan men-download sebuah file json dari semua nilai-nilai dalam bentuk yang besar. Aku membutuhkan ini untuk bekerja dengan IE/Edge/Chrome. Ini adalah apa yang saya lakukan:

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

Ada satu masalah dengan nama file dan ekstensi pada tepi tetapi pada saat menulis ini tampaknya menjadi sebuah bug dengan Tepi yang disebabkan diperbaiki.

Semoga ini bisa membantu seseorang

Fabian von Ellerts
Jawaban edit 16 Januari 2019 в 11:41
Komentar (2)

Sederhana, bersih solusi bagi mereka yang hanya menargetkan browser modern:

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');
Komentar (1)

Download milik dari link adalah baru dan tidak didukung di Internet Explorer (lihat tabel kompatibilitas di sini). Untuk cross-browser solusi untuk masalah ini aku akan melihat FileSaver.js

Komentar (0)

Bereaksi: tambahkan ini di mana anda inginkan dalam membuat metode.

• Objek dalam negeri:

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

• Objek dalam alat peraga:

<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 dan gaya adalah opsional, mengubah gaya sesuai dengan kebutuhan anda.

Abido
Jawaban edit 14 Desember 2018 в 5:33
Komentar (0)

Cobalah untuk mengatur MIME-type: exportData = &#39;data:application/octet-stream;charset=utf-8,&#39;;

Tapi ada dapat masalah dengan nama file dalam dialog simpan.

minimulin
Jawaban edit 1 November 2013 в 6:47
Komentar (2)