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:)
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();
}
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
Ini akan menjadi murni JS versi (diadaptasi dari cowboy's):
var obj = {a: 23, 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);
Anda bisa mencoba menggunakan:
- native JavaScript API's Blob konstruktor dan
- the FileSaver.js
saveAs()metode
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)
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");
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 = /*@[email protected]*/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
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');
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.
Cobalah untuk mengatur MIME-type:
exportData = 'data:application/octet-stream;charset=utf-8,';
Tapi ada dapat masalah dengan nama file dalam dialog simpan.
