Existe alguma maneira de especificar um nome de arquivo sugerido ao usar dados: URI?

Se, por exemplo, você seguir o link:

data:application/octet-stream;base64,SGVsbG8=

O navegador solicitará que você baixe um arquivo que consiste nos dados mantidos como base64 no próprio hiperlink. Existe alguma maneira de sugerir um nome padrão na marcação? Caso contrário, existe uma solução JavaScript?

Use o downloadatributo:

<a download='FileName' href='your_url'>

Exemplo vivo no html5-demos.appspot.com / ... .

Atualmente, funciona no Chrome, Firefox, Edge, Opera e Safari de desktop, mas não no iOS Safari ou IE11.

Atualmente, o Chrome simplifica muito isso:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

Apenas HTML: use o downloadatributo:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

Somente Javascript: você pode salvar qualquer URI de dados com este código:

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome, Firefox e Edge 13+ usarão o nome do arquivo especificado.

O IE11, Edge 12 e Safari 9 (que não suportam o downloadatributo ) farão o download do arquivo com o nome padrão ou eles simplesmente o exibirão em uma nova guia, se for do tipo de arquivo suportado: imagens, vídeos, arquivos de áudio ,…

De acordo com a RFC 2397 , não, não existe.

Também não parece haver nenhum atributo do <a>elemento que você possa usar.

No entanto, o HTML5 introduziu posteriormente o downloadatributo no <a>elemento, embora no momento da gravação o suporte não seja universal (sem suporte ao MSIE, por exemplo)

Procurei um pouco nas fontes do firefox em netwerk / protocol / data / nsDataHandler.cpp

manipulador de dados analisa apenas conteúdo / tipo e conjunto de caracteres e verifica se há "; base64" na sequência

o rfc não especifica nome de arquivo e, pelo menos, o Firefox não lida com nome de arquivo, o código gera um nome aleatório mais ".part"

Eu também verifiquei o log do firefox

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

arquivos interessantes se você quiser ver fontes do mozilla:

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

Acho que você pode parar de procurar uma solução por enquanto, porque suspeito que não exista :)

conforme observado neste tópico, o html5 tem downloadatributo, mas também funciona no firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

O seguinte snippet Javascript funciona no Chrome usando o novo atributo 'baixar' dos links e simulando um clique.

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

E o exemplo a seguir mostra seu uso:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

Não.

O objetivo todo é que seja um fluxo de dados, não um arquivo. A fonte de dados não deve ter nenhum conhecimento do agente do usuário que a manipula como um arquivo ... e não.

você pode adicionar um atributo de download ao elemento âncora.

amostra:

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>

Veja este link: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Citar:

Até funciona (como em, não causa nenhum problema) com; base64 no final
desta forma (pelo menos no Opera):

data: text / plain; charset = utf-8; headers = Content-Disposition% 3A% 20attachment% 3B% 20filename% 3D% 22with% 20spaces.txt% 22% 0D% 0Documentação% 3A% 20en; base64,4oiaDQo% 3D

Também há algumas informações nas mensagens restantes da discussão.

Usando trabalhadores de serviço , isso é finalmente possível no sentido mais verdadeiro.

1. Crie um URL falso. Por exemplo /saveAs/myPrettyName.jpg
2. Use URL <a href, <img src, window.open (url), absolutamente tudo o que pode ser feito com um URL "real".
3. Dentro do trabalhador, capture o evento de busca e responda com os dados corretos.

O navegador agora sugere myPrettyName.jpg mesmo que o usuário abra o arquivo em uma nova guia e tente salvá-lo lá. Será exatamente como se o arquivo tivesse vindo do servidor.

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});

Há um pequeno script de solução alternativa no Google Code que funcionou para mim:

http://code.google.com/p/download-data-uri/

Ele adiciona um formulário com os dados, o envia e remove o formulário novamente. Hacky, mas fez o trabalho para mim. Requer jQuery.

Esse tópico apareceu no Google antes da página do Google Code e achei que seria útil ter o link aqui também.

Aqui está uma versão do jQuery baseada na versão de Holf e funciona com Chrome e Firefox, enquanto sua versão parece funcionar apenas com o Chrome. É um pouco estranho adicionar algo ao corpo para fazer isso, mas se alguém tiver uma opção melhor, eu sou a favor.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();

É meio brincalhão, mas eu já estive na mesma situação antes. Eu estava gerando dinamicamente um arquivo de texto em javascript e queria fornecê-lo para download, codificando-o com o URI de dados.

Isso é possível com uma intervenção menor do usuário principal. Gere um link <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Como eu disse, isso é deselegante, mas funciona se você não precisar de uma solução profissional.

Isso pode ser menos doloroso usando o flash para copiar o nome para a área de transferência primeiro. Obviamente, se você se permitir usar Flash ou Java (agora com menos e menos suporte a navegador, eu acho?), Provavelmente poderá encontrar outra maneira de fazer isso.

Este funciona com o Firefox 43.0 (antigo não testado):

dl.js:

function download() {
  var msg="Hello world!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

Se clicar no botão, ele oferece um arquivo chamado hello.bin para download. O truque é usar o arquivo em vez do Blob .

referência: https://developer.mozilla.org/de/docs/Web/API/File

var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
    {
            var fileData = ['\ufeff' + uri];
            var blobObject = new Blob(fileData);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    }
    else //chrome
    {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
         window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
            fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                fileEntry.createWriter(function (fileWriter) {
                    var fileData = ['\ufeff' + uri];
                    var blob = new Blob(fileData);
                    fileWriter.addEventListener("writeend", function () {
                        var fileUrl = fileEntry.toURL();
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, false);
                    fileWriter.write(blob);
                }, function () { });
            }, function () { });
         }, function () { });
    }

Você pode conseguir isso no Chrome e no FireFox.

Tente o seguinte URL, ele fará o download do código que foi usado.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==