Скачать 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-данные, отображенные на ней, не скачивая его.

Я прошла некоторые исследования, и этого никто требования к работе, но я не'т вижу никакой разницы в моем коде.

Я что-то пропустил в моем коде?

Спасибо, что прочитали мой вопрос:)

Community
Редактировал вопрос 23-го мая 2017 в 11:47
Программирование
javascript json
1-го ноября 2013 в 5:42
30 просмотров
Решение

Вот как я решил его для моего приложения:

HTML-код: в <идентификатор="и downloadAnchorElem" в стиле=на"дисплей:нет" и></а>

Яш (чистом JavaScript, а не 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, которые вы хотите сохранить, и "сцены.в 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();
  }
bformet
Редактировал ответ 28-го мая 2018 в 8:12
Комментарии (12)

Нашел ответа.

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

кажется, работает хорошо для меня.

Все заслуга @ковбой-Бен-алман, кто является автором код, указанный выше

Eugene Yu
Редактировал ответ 6-го января 2015 в 11:32
Комментарии (3)

Это будет чисто версию 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][1]

Комментарии (4)

Вы можете попробовать использовать:

  • родной API-интерфейса JavaScript'ы Клякса конструктор и
  • в 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)
user1063287
Редактировал ответ 14-го сентября 2018 в 10:47
Комментарии (4)

Следующие работал для меня: 

/* 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");
Комментарии (1)

Недавно мне пришлось создать кнопку, что бы скачать файл JSON всех значений большой формы. Мне это нужно для работы с IE/края/хром. Вот что я сделал:

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, но на момент написания этой, казалось бы, ошибка с краю, которая должна быть исправлена.

Надеюсь, что это помогает кто-то

Fabian von Ellerts
Редактировал ответ 16-го января 2019 в 11:41
Комментарии (2)

Простые, чистые решение для тех, кто только целевой современных браузеров:

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');
Комментарии (1)

Скачать собственность ссылок новая и не поддерживается в Internet Explorer (см. таблицу совместимости здесь). Для кросс-браузер решение этой проблемы я хотел бы взглянуть на FileSaver.js

Комментарии (0)

Реагировать: добавьте это, где вы хотите в вашем методе render.

• Объект в состоянии:

<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 и стиль являются необязательными, изменить стиль в соответствии с вашими потребностями.

Abido
Редактировал ответ 14-го декабря 2018 в 5:33
Комментарии (0)

Попробуйте установить другой MIME-тип: exportData = &#39;данных:приложения/октет-поток;кодировка=кодировка UTF-8,&#39;;

Но там могут быть проблемы с именем файла в диалоге сохранения.

minimulin
Редактировал ответ 1-го ноября 2013 в 6:47
Комментарии (2)