3

Estou querendo fazer algo mais ou menos assim:

$('button').on('click', function() {

  obj = {};
   
  $('pseudoform').find('input,textarea').each(function() {
    obj[$(this).attr('name')] = String($(this).val());
  });

  json = JSON.stringify(obj);
  
  $('input[name=proof]').val(json);
  
  alert('Queria que baixasse: ' + json);

});
textarea,
input,
button {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pseudoform>

  <label>Titulo:
    <input type="text" name="title" value="um valor">
  </label>

  <label>Descrição:
    <textarea name="desc">qualquer</textarea>
  </label>

  <input type="hidden" value="123456" name="challenge">
  <input type="hidden" value="999999" name="nonce">

</pseudoform>

<form target="#">

  <input type="hidden" value="{valor aqui}" name="proof">
  <button>Baixar</button>

</form>

A ideia é que o value do proof seja dinamicamente definido com um json. Este json teria os valores de todos os inputs que existem em cima dele, dentro do pseudoform.

A outra etapa seria que o usuário baixasse o conteúdo, clicando no botão "baixar", esta é a questão.

Como posso fazer para que o Javascript, no navegador, force o usuário a baixar esse conteúdo ({"title":"um valor","desc":"qualquer","challenge":"123456","nonce":"999999"}) quando clicar em "baixar"?


O motivo para o usuário baixar o que ele mesmo escreve é que preciso que o usuário assine o conteúdo usando OpenGPG, com algum smartcard. O servidor deve apenas receber as informações do json (que está no input) e a assinatura (armored detached signature file) desse json.

0

2 Respostas 2

5

Por questões de compatibilidade para o Internet Explorer usa o navigator.msSaveBlob, outro ponto importante é notar que alguns navegadores não suportam o atributo download em algumas situações, como cross-domain, mas não creio influenciar no caso, só citei como informativo.

Também ocorrer do atributo do download não ser reconhecido, talvez por ser um navegador mais antigo ou outro comportamento, neste caso seria interessante usar o mime-type application/octet-stream que poderá ajudar, um detalhe importante disto é que em alguns dispositivos mobile como navegadores iOS o download não irá ocorrer de forma alguma, então as soluções aqui aplicadas são somente suportadas em alguns casos.

Um exemplo seria algo como:

function downloadData(name, data, newWindow) {

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

No CSS adicione isto (não use display: none o comportamento pode variar em diferentes navegadores):

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

Uso do script:

json = JSON.stringify(obj);

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

downloadData('meujson.json', json);

Para evitar paginações recomendo que prefira tentar abrir em uma nova página/aba, assim:

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

Nota: Removi o exemplo com Stack Snippet, pois o mesmo usa iframe sandbox, para que o exemplo funciona-se seria necessário que o iframe usado pelo Stack Snippet tivesse a opção allow-downloads no atributo <iframe sandbox="allow-downloads ...", mas em um cenário de uso mais comum ou habilitando a opção, acaso esteja usando sandbox, o script irá funcionar

Referencias:

4

Você pode utilizar uma tag <a> com o atributo download para que você possa forçar o download do json que você deseja, passando um blob como o href, junto do mime type adequado. Segue um exemplo abaixo:

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .