Ultimamente, tenho brincado com o WebGL e consegui um leitor Collada funcionando. O problema é que é muito lento (Collada é um formato muito detalhado), então vou começar a converter arquivos para um formato mais fácil de usar (provavelmente JSON). Eu já tenho o código para analisar o arquivo em JavaScript, então também posso usá-lo como meu exportador! O problema está salvando.

Agora, eu sei que posso analisar o arquivo, enviar o resultado ao servidor e solicitar que o navegador solicite o arquivo de volta do servidor como um download. Mas, na realidade, o servidor não tem nada a ver com esse processo específico, então por que envolvê-lo? Eu já tenho o conteúdo do arquivo desejado na memória. Existe alguma maneira de eu apresentar ao usuário um download usando JavaScript puro? (Eu duvido, mas é melhor perguntar ...)

E para ser claro: não estou tentando acessar o sistema de arquivos sem o conhecimento dos usuários! O usuário fornecerá um arquivo (provavelmente por meio de arrastar e soltar), o script transformará o arquivo na memória e o usuário será solicitado a baixar o resultado. Todas essas atividades devem ser "seguras" no que diz respeito ao navegador.

[EDIT]: Eu não mencionei isso de antemão, então os pôsteres que responderam "Flash" são válidos o suficiente, mas parte do que estou fazendo é uma tentativa de destacar o que pode ser feito com HTML5 puro ... então o Flash é bem no meu caso. (Embora seja uma resposta perfeitamente válida para qualquer pessoa que faça um aplicativo Web "real".) Nesse caso, parece que estou sem sorte, a menos que queira envolver o servidor. Obrigado mesmo assim!

OK, criando dados: o URI definitivamente faz o truque para mim, graças a Matthew e Dennkster apontando essa opção! Aqui está basicamente como eu faço isso:

1) coloque todo o conteúdo em uma string chamada "content" (por exemplo, criando-o inicialmente ou lendo innerHTML da tag de uma página já criada).

2) Crie o URI de dados:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Haverá limitações de comprimento, dependendo do tipo de navegador, etc., mas, por exemplo, o Firefox 3.6.12 funciona até pelo menos 256k. Codificar em Base64 em vez de usar encodeURIComponent pode tornar as coisas mais eficientes, mas para mim tudo bem.

3) abra uma nova janela e "redirecione" para este URI solicitando um local de download da minha página gerada por JavaScript:

newWindow = window.open(uriContent, 'neuesDokument');

É isso aí.

Solução simples para navegadores prontos para HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Uso

download('test.txt', 'Hello world!');

O HTML5 definiu um window.saveAs(blob, filename)método. Não é suportado por nenhum navegador no momento. Mas há uma biblioteca de compatibilidade chamada FileSaver.js que adiciona essa função aos navegadores mais modernos (incluindo o Internet Explorer 10+). O Internet Explorer 10 oferece suporte a um navigator.msSaveBlob(blob, filename)método ( MSDN ), usado no FileSaver.js para suporte ao Internet Explorer.

Eu escrevi uma postagem no blog com mais detalhes sobre esse problema.

Salvando arquivos grandes

URIs de dados longos podem causar problemas de desempenho nos navegadores. Outra opção para salvar arquivos gerados no lado do cliente é colocar o conteúdo em um objeto Blob (ou Arquivo) e criar um link de download usando URL.createObjectURL(blob). Isso retorna um URL que pode ser usado para recuperar o conteúdo do blob. O blob é armazenado dentro do navegador até que seja URL.revokeObjectURL()chamado no URL ou o documento que o criou seja fechado. A maioria dos navegadores da Web tem suporte para URLs de objetos , o Opera Mini é o único que não os suporta.

Forçando um download

Se os dados forem texto ou imagem, o navegador poderá abrir o arquivo, em vez de salvá-lo no disco. Para fazer o download do arquivo ao clicar no link, você pode usar o downloadatributo No entanto, nem todos os navegadores da Web têm suporte para o atributo de download . Outra opção é usar application/octet-streamcomo o tipo mime do arquivo, mas isso faz com que o arquivo seja apresentado como um blob binário que é especialmente hostil ao usuário se você não especificar ou não puder especificar um nome de arquivo. Consulte também ' Forçar a abrir o pop-up "Salvar como ..." aberto no link de texto, clique em pdf em HTML '.

Especificando um nome de arquivo

Se o blob for criado com o construtor File, você também poderá definir um nome de arquivo, mas apenas alguns navegadores da Web (incluindo Chrome e Firefox) terão suporte para o construtor File . O nome do arquivo também pode ser especificado como argumento para o downloadatributo, mas isso está sujeito a várias considerações de segurança . O Internet Explorer 10 e 11 fornece seu próprio método, msSaveBlob , para especificar um nome de arquivo.

Código de exemplo

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Dê uma olhada no Downloadify de Doug Neiner, que é uma interface JavaScript baseada em Flash para fazer isso.

O Downloadify é uma pequena biblioteca JavaScript + Flash que permite a geração e o salvamento de arquivos dinamicamente, no navegador, sem interação do servidor.

Solução Simples!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Funciona em todos os navegadores modernos.

Você pode gerar um URI de dados . No entanto, existem limitações específicas do navegador.

Eu usei o FileSaver ( https://github.com/eligrey/FileSaver.js ) e funciona muito bem.
Por exemplo, eu fiz essa função para exportar logs exibidos em uma página.
Você precisa passar uma matriz para a instanciação do Blob, então talvez eu não tenha escrito da maneira certa, mas funciona para mim.
Apenas no caso, tenha cuidado com a substituição: esta é a sintaxe para torná-la global, caso contrário, ela substituirá apenas a primeira que ele encontrar.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Encontrei duas abordagens simples que funcionam para mim. Primeiro, usando um aelemento já clicado e injetando os dados do download. E segundo, gerando um aelemento com os dados de download, executando a.click()e removendo-os novamente. Mas a segunda abordagem funciona apenas se invocada por uma ação de clique do usuário. (Alguns) Bloqueios de navegador click()de outros contextos, como no carregamento ou acionados após um tempo limite (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Aqui está um link para o método de URI de dados sugerido por Mathew, que funcionou no safari, mas não muito bem porque eu não consegui definir o tipo de arquivo, ele é salvo como "desconhecido" e, em seguida, tenho que ir lá novamente mais tarde e alterá-lo para para visualizar o arquivo ...

http://www.nihilogic.dk/labs/canvas2image/

Você pode usar localStorage. Este é o equivalente em HTML5 dos cookies. Parece funcionar no Chrome e Firefox, mas no Firefox, eu precisava enviá-lo para um servidor. Ou seja, testar diretamente no meu computador doméstico não funcionou.

Estou trabalhando em exemplos HTML5. Vá para http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html e role até o labirinto. As informações para reconstruir o labirinto são armazenadas usando localStorage.

Eu vim a este artigo procurando por HTML5 JavaScript para carregar e trabalhar com arquivos xml. É o mesmo que o antigo html e JavaScript ????

experimentar

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Se você deseja baixar dados binários, veja aqui

Atualizar

2020.06.14 Eu atualizo o Chrome para 83.0 e acima A parada do snippet SO funciona (devido a restrições de segurança da sandbox ) - mas a versão JSFiddle funciona - aqui

Conforme mencionado anteriormente, a API do arquivo , juntamente com as APIs FileWriter e FileSystem, pode ser usada para armazenar arquivos na máquina do cliente a partir do contexto de uma guia / janela do navegador.

No entanto, existem várias coisas relacionadas às duas últimas APIs das quais você deve estar ciente:

• Atualmente, as implementações das APIs existem apenas em navegadores baseados no Chromium (Chrome e Opera)
• Ambas as APIs foram retiradas da faixa de padrões do W3C em 24 de abril de 2014 e, atualmente, são proprietárias
• A remoção das APIs (agora proprietárias) da implementação de navegadores no futuro é uma possibilidade
• Uma sandbox (um local no disco fora do qual os arquivos não podem produzir efeito) é usada para armazenar os arquivos criados com as APIs
• Um sistema de arquivos virtual (uma estrutura de diretórios que não existe necessariamente em disco da mesma forma que quando acessada pelo navegador) é usado para representar os arquivos criados com as APIs

Aqui estão exemplos simples de como as APIs são usadas, direta e indiretamente, em conjunto para fazer isso:

BakedGoods *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Usando as APIs File, FileWriter e FileSystem brutas

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Embora as APIs FileSystem e FileWriter não estejam mais no caminho dos padrões, seu uso pode ser justificado em alguns casos, na minha opinião, porque:

• O interesse renovado dos fornecedores de navegador que não implementam pode colocá-los de volta nele
• A penetração no mercado de navegadores de implementação (baseados em cromo) é alta
• O Google (o principal colaborador do Chromium) não forneceu uma data de término de validade para as APIs

Se "alguns casos" abrange os seus, no entanto, é para você decidir.

* BakedGoods é mantido por ninguém menos que esse cara aqui :)

Esse encadeamento foi inestimável para descobrir como gerar um arquivo binário e solicitar o download do arquivo nomeado, tudo no código do cliente sem um servidor.

O primeiro passo para mim foi gerar o blob binário a partir dos dados que eu estava salvando. Existem muitos exemplos para fazer isso para um único tipo binário, no meu caso, tenho um formato binário com vários tipos que você pode passar como uma matriz para criar o blob.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

A próxima etapa é fazer com que o navegador solicite ao usuário que baixe esse blob com um nome predefinido.

Tudo o que eu precisava era de um link nomeado que eu adicionei no HTML5 que eu pudesse reutilizar para renomear o nome do arquivo inicial. Eu o mantive oculto, pois o link não precisa ser exibido.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

A última etapa é solicitar ao usuário que baixe o arquivo.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Aqui está um tutorial para exportar arquivos como ZIP:

Antes de começar, existe uma biblioteca para salvar arquivos, o nome da biblioteca é fileSaver.js. Você pode encontrar esta biblioteca aqui. Vamos começar, Agora, inclua as bibliotecas necessárias:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Agora copie esse código e ele fará o download de um arquivo zip com um arquivo hello.txt com o conteúdo Hello World. Se tudo funcionar bem, isso fará o download de um arquivo.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Isso fará o download de um arquivo chamado file.zip. Você pode ler mais aqui: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library