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.
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))
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");
// 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);
- O Exemplo de área de desenho com o Suporte de ficheiros save to. Basta colocar o seu {[[0]} no URI de dados.
-
exemplo de download da âncora . Ele usa
<a href="your-data-uri" download="filename.txt">
para especificar o nome do ficheiro.
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");
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
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');
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).
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?)
Para qualquer pessoa com problemas no IE:
Por favor, vote a resposta aqui por Yetti.: gravar a área de desenho localmente no IEdataURItoBlob = 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");
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.