Utwórz plik w pamięci do pobrania przez użytkownika, a nie przez serwer

Proste rozwiązanie dla przeglądarek gotowych do HTML5...

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

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Użycie

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

Wszystkie powyższe przykłady działają dobrze w chrome i IE, ale nie w Firefoksie. Rozważ dodanie kotwicy do ciała i usunięcie jej po kliknięciu.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Wszystkie powyższe rozwiązania nie działały we wszystkich przeglądarkach. Oto, co w końcu działa na IE 10+, Firefox i Chrome (i Bez jQuery lub jakiejkolwiek innej biblioteki):

save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Zauważ, że w zależności od twojej sytuacji możesz również zadzwonić do URL .revokeObjectURL po usunięciu elem. Zgodnie z docs dla URL.createObjectURL :

Za każdym razem, gdy wywołujesz createObjectURL (), tworzony jest nowy adres URL obiektu, nawet jeśli utworzyłeś go już dla tego samego obiekt. Każdy z nich musi być zwolniony przez wywołanie URL.revokeObjectURL (), gdy nie są już potrzebne. Przeglądarki zwalniają je automatycznie po rozładowaniu dokumentu; jednak dla optymalnej wydajności i wykorzystania pamięci, jeśli są bezpieczne czasy, kiedy można je wyraźnie rozładować, należy to zrobić.

Z przyjemnością korzystam FileSaver.js . Jego kompatybilność jest całkiem dobra (IE10+ i wszystko inne) i jest bardzo prosta w użyciu:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

Następująca metoda działa w IE11+, Firefox 25 + i Chrome 30+:

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

Zobacz to w akcji: http://jsfiddle.net/Kg7eA/

Z drugiej strony, IE posiada API do zapisywania obiektów blob, które można wykorzystać do tworzenia i pobierania plików.

Rozwiązanie działające na IE10: (Potrzebowałem pliku csv, ale wystarczy zmienić typ i nazwę pliku na txt)

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

To rozwiązanie jest pobierane bezpośrednio z tiddlywiki (tiddlywiki.com) repozytorium github. Używałem tiddlywiki w prawie wszystkich przeglądarkach i działa jak urok:

function(filename,text){
    // Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Github repo: pobierz Moduł wygaszacza

Jeśli chcesz przekonwertować ciąg znaków, aby był dostępny do pobrania, możesz spróbować tego za pomocą jQuery.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

Od kwietnia 2014 r. API plików mogą nie być standaryzowane w W3C. każdy, kto patrzy na rozwiązanie z blobem, powinien zachować ostrożność.

HTML5 rocks heads up

Lista dyskusyjna W3C na FileSytem API

Na podstawie odpowiedzi @ Rick, która była bardzo pomocna.

Musisz scape the string data jeśli chcesz podzielić się nim w ten sposób:

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

` Sorry I can not comment on @ Rick ' s answer due to my current low reputation in StackOverflow.

An sugestia edycji {[10] } została udostępniona i odrzucona.

Jak wspomniano wcześniej, filesaver jest świetnym pakietem do pracy z plikami po stronie klienta. Ale nie jest dobrze z dużymi plikami. StreamSaver.js jest alternatywnym rozwiązaniem (wskazywanym w serwerze plików.js), które mogą obsługiwać duże pliki:

const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()

Możesz nawet zrobić coś lepszego niż tylko URI - używając Chrome możesz również zasugerować nazwę pliku, jak wyjaśniono w Ten post na blogu o nazywaniu pobierania przy użyciu Uri .

Jeśli plik zawiera dane tekstowe, techniką, której używam, jest umieszczenie tekstu w elemencie textarea i wybranie go przez użytkownika (kliknij w textarea, a następnie ctrl-A), a następnie skopiowanie i wklejenie do edytora tekstu.

Rzeczywiście jest to możliwe-użyj Flasha.

Możesz albo wygenerować zawartość za pomocą JS, a następnie zainicjować niektóre var flash lub po prostu zrobić wszystko w filmie flash.

Proszę spojrzeć na to , aby uzyskać kilka ważnych uwag.