How to force download of local information in the browser? [duplicate]

For compatibility reasons Internet Explorer use navigator.msSaveBlob , another important point is to note that some browsers do not support the download attribute in some situations, such as cross-domain , but I do not think I influence the case, I just quoted as informative.

Also, if the download attribute is not recognized, perhaps because it is an older browser or other behavior, in this case it would be interesting to use mime-type application/octet-stream which may help, an important detail of this is that on some mobile devices

An example would be something like:

function downloadData(name, data, nw) {

    //Internet Explorer
    if (navigator.msSaveBlob) {
        var blob = new Blob([data]); //Aplica o conteúdo para baixar
        navigator.msSaveBlob(blob, name); //Nome do arquivo
        return;
    }

    var body = document.body;

    var uridown = "data:application/octecstream," + encodeURIComponent(data);

    var el = document.createElement("a"); //Cria o link

    el.download = name; //Define o nome

    el.href = uridown; //Define a url

    //Adiciona uma classe css pra ocultar
    el.className = "hide-link";

    //Força abrir em uma nova janela
    if (nw) {
        el.target = "_blank";
    }

    //Adiciona no corpo da página (necessário para evitar comportamento variado em diferentes navegadores)
    body.appendChild(el);

    if (el.fireEvent) {
        //Simula o click pra navegadores com suporte ao fireEvent
        el.fireEvent("onclick");
    } else {
        //Simula o click com MouseEvents
        var evObj = document.createEvent("MouseEvents");
        evObj.initEvent("click", true, false);
        el.dispatchEvent(evObj);
    }

    //Remove o link da página
    setTimeout(function() {
        body.removeChild(el);
    }, 100);
}

In CSS add this (do not use iOS behavior may vary in different browsers):

.hide-link {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Using the script:

json = JSON.stringify(obj);

$('input[name=proof]').val(json);

downloadData('meujson.json', json);

In order to avoid piling, I recommend that you prefer to try opening in a new page / tab like this:

downloadData('meujson.json', json, true);

Example

Test the example:

downloadData("foo.json", '{ "foo": "bar" }', true);

function downloadData(name, data, nw) {

    //Internet Explorer
    if (navigator.msSaveBlob) {
        var blob = new Blob([data]); //Aplica o conteúdo para baixar
        navigator.msSaveBlob(blob, name); //Nome do arquivo
        return;
    }

    var body = document.body;

    var uridown = "data:application/octecstream," + encodeURIComponent(data);

    var el = document.createElement("a"); //Cria o link

    el.download = name; //Define o nome

    el.href = uridown; //Define a url

    //Adiciona uma classe css pra ocultar
    el.className = "hide-link";

    //Força abrir em uma nova janela
    if (nw) {
        el.target = "_blank";
    }

    //Adiciona no corpo da página (necessário para evitar comportamento variado em diferentes navegadores)
    body.appendChild(el);

    if (el.fireEvent) {
        //Simula o click pra navegadores com suporte ao fireEvent
        el.fireEvent("onclick");
    } else {
        //Simula o click com MouseEvents
        var evObj = document.createEvent("MouseEvents");
        evObj.initEvent("click", true, false);
        el.dispatchEvent(evObj);
    }

    //Remove o link da página
    setTimeout(function() {
        body.removeChild(el);
    }, 100);
}

.hide-link {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

You can use a <a> tag with the download so you can force the download of json you want, passing a blob as the href, next to the appropriate mime type. Here's an example below:

var btn  = document.getElementById('btnDownload');

	btn.addEventListener('click', function(){
		var obj  = {"id":1, "name": "Lorem"};  
	  	var data = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
		var a = document.getElementById('aDownload');
		a.setAttribute("href",data);
		a.setAttribute("download", "data.json");
		a.click();
	});

<a id="aDownload" style="display: none;"></a>
<button id="btnDownload">Baixar</button>