Obter o ficheiro url dos dados

estou a brincar com a ideia de fazer um utilitário zip/unzip totalmente baseado em javascript que qualquer pessoa pode aceder a partir de um navegador. Eles podem simplesmente arrastar o seu zip diretamente para o navegador e ele vai deixá-los baixar todos os arquivos dentro. Eles também podem criar novos arquivos zip, arrastando arquivos individuais em.

Sei que seria melhor fazê-lo em serverside, mas este projecto é só para nos divertirmos.

arrastar ficheiros para o navegador deve ser fácil se eu tirar partido do vários métodos disponíveis. (estilo gmail)

espero que a codificação/descodificação esteja boa. Já vi algumas bibliotecas do AS3 zip, por isso tenho a certeza que não me importo com isso.

O meu problema é descarregar os ficheiros no fim..

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 
Isto funciona bem no firefox, mas não no cromado.

Eu posso incorporar os arquivos como imagens apenas encontrar no chrome usando <img src="data:jpg/image;ba.." />, mas os arquivos não serão necessariamente imagens. Podem ser qualquer formato.

Alguém consegue pensar noutra solução ou algum tipo de solução? de trabalho?

Author: Tim S. Van Haren, 2010-10-12

11 answers

Ideias:

  • Tente um <a href="data:...." target="_blank"> (não Testado)

  • Usar o download em vez de URLs de dados (também funcionaria para o IE))

 29
Author: Pekka 웃, 2011-03-03 21:56:40

Se também quiser dar um nome sugerido ao ficheiro (em vez do 'download' por omissão), poderá usar o seguinte no Chrome, Firefox e algumas versões IE:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

E o seguinte exemplo mostra a sua utilização:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
 134
Author: owencm, 2016-09-02 20:12:57
Quero partilhar a minha experiência e ajudar alguém preso nos downloads que não trabalham no Firefox e numa resposta actualizada para 2014. O excerto abaixo irá funcionar tanto no firefox como no chrome e irá aceitar um nome de ficheiro:
  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);
 22
Author: Martino Dino, 2018-03-10 21:15:48
Existem várias soluções, mas dependem do HTML5 e ainda não foram completamente implementadas em alguns navegadores. Exemplos abaixo foram testados em cromo e Firefox (parcialmente obras).
  1. O Exemplo de área de desenho com o Suporte de ficheiros save to. Basta colocar o seu {[[0]} no URI de dados.
  2. exemplo de download da âncora . Ele usa <a href="your-data-uri" download="filename.txt"> para especificar o nome do ficheiro.
 11
Author: Viacheslav Dobromyslov, 2014-03-08 02:22:06

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  var b = document.createEvent("MouseEvents");
  b.initEvent("click", false, true);
  a.dispatchEvent(b);
  return false;
}

download("data:text/html,HelloWorld!", "helloWorld.txt");
 9
Author: Zibri, 2018-09-11 15:30:16
Aqui está uma solução JavaScript pura que eu testei trabalhando no Firefox e no Chrome, mas não no Internet Explorer:
function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

As soluções de Cross-browser encontradas até agora:

O Download - > Requer O Flash

Base de dados - > testada nos IE 10 e 11, e não funciona para mim. Requer um servlet e alguma personalização. (Detecta incorrectamente o navegador. Tive de definir o IE no modo de compatibilidade para testar, a codificação por omissão no servlet, o objecto de opções JavaScript com a localização correcta do servlet para absoluto...) Para navegadores não-IE, ele abre o arquivo na mesma janela.

Telecarregamento.js - > http://danml.com/download.html outra biblioteca semelhante, mas não testada. Afirma ser JavaScript puro, não requerendo servlet nem Flash, mas não funciona no IE

 8
Author: Jesus M C, 2018-04-12 02:48:14

Combinando as respostas de @owencm e @Chazt3n, esta função permitirá obter o texto do IE11, Firefox e do Chrome. (Desculpe, eu não tenho acesso a Safari ou ópera, mas por favor adicione um comentário se você tentar e funciona.)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');
 6
Author: kevinarpe, 2017-02-06 08:22:38

Pode-se também iniciar transferências de URL de dados através de JavaScript. Ver https://stackoverflow.com/a/13696029/271577 para tal solução (juntamente com exemplos de ligações de texto).

 2
Author: Brett Zamir, 2017-05-23 12:26:33

O seu problema resume-se essencialmente a "nem todos os navegadores irão suportar isto".

Você poderia tentar um workaround e servir os arquivos desbloqueados a partir de um objeto Flash, mas então você perderia a pureza apenas JS (de qualquer forma, eu não tenho certeza se você atualmente pode "arrastar arquivos para o navegador" sem algum tipo de workaround Flash - isso é um recurso HTML5 talvez?)

 0
Author: Piskvor, 2010-10-12 15:25:03

Para qualquer pessoa com problemas no IE:

Por favor, vote a resposta aqui por Yetti.: gravar a área de desenho localmente no IE
dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");
 0
Author: Chazt3n, 2017-05-23 12:26:25

Citando esta resposta:

Descarregue o ficheiro e depois sirva - o ao Utilizador como base64 (para evitar problemas do CORS)

$.get(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

Este é IE 10+, Cromo 8+, FF 4+. Ver https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

Só vai descarregar o ficheiro no Chrome, Firefox e Opera. Isto usa um atributo de download na marca de âncora para forçar o navegador a baixá-lo.
 0
Author: danielmhanover, 2018-09-02 21:01:05