Korzystanie z HTML5 / Javascript do generowania i zapisywania pliku

Proste rozwiązanie dla przeglądarek gotowych do 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();
    }
}

Użycie

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

HTML5 zdefiniował metodę window.saveAs(blob, filename). Nie jest teraz obsługiwany przez żadną przeglądarkę. Istnieje jednak biblioteka kompatybilności o nazwie FileSaver.js , który dodaje tę funkcję do większości nowoczesnych przeglądarek (w tym Internet Explorer 10+). Internet Explorer 10 obsługuje metodę navigator.msSaveBlob(blob, filename) ( MSDN ), która jest używana w przeglądarce plików.js dla obsługi Internet Explorera.

Napisałem blog post z więcej szczegółów na temat tego problemu.

Zapisywanie dużych plików

Długie Uri danych mogą powodować problemy z wydajnością w przeglądarkach. Inną opcją zapisywania wygenerowanych po stronie klienta plików, jest umieszczenie ich zawartości w obiekcie Blob (lub Pliku) i utworzenie łącza pobierania za pomocą URL.createObjectURL(blob). Zwraca adres URL, który może być użyty do pobrania zawartości obiektu blob. Obiekt blob jest przechowywany w przeglądarce do momentu wywołania URL.revokeObjectURL() w adresie URL lub zamknięcia dokumentu, który go utworzył. Większość przeglądarek posiada wsparcie dla obiektu Adresy URL , Opera Mini jest jedyną, która ich nie obsługuje.

Wymuszanie pobierania

Jeśli dane są tekstem lub obrazem, przeglądarka może otworzyć plik, zamiast zapisać go na dysku. Aby spowodować pobranie pliku po kliknięciu linku, możesz użyć atrybutu download. Jednak nie wszystkie przeglądarki internetowe mają wsparcie dla atrybutu download. Inną opcją jest użycie application/octet-stream jako typu MIME pliku, ale powoduje to, że plik będzie prezentowany jako binarny obiekt blob co jest szczególnie nieprzyjazne dla użytkownika, jeśli nie możesz lub nie możesz podać nazwy pliku. Zobacz także 'wymuszenie otwarcia " Zapisz jako..."popup open at text link click for pdf in HTML ".

Określanie nazwy pliku

Jeśli obiekt blob jest tworzony za pomocą konstruktora plików, możesz również ustawić nazwę pliku, ale tylko kilka przeglądarek internetowych (w tym Chrome i Firefox) ma wsparcie dla konstruktora Plików. Nazwę pliku można również podać jako argument atrybutu download, ale jest to z zastrzeżeniem ton względów bezpieczeństwa . Internet Explorer 10 i 11 udostępnia własną metodę, msSaveBlob, aby określić nazwę pliku.

Przykładowy kod

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();
}

Spójrz na Downloadify, który jest interfejsem JavaScript opartym na Flashu.

Downloadify jest małą biblioteką JavaScript + Flash, która umożliwia generowanie i zapisywanie plików w locie, w przeglądarce, bez interakcji z serwerem.

Proste Rozwiązanie!

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

Działa we wszystkich nowoczesnych przeglądarkach (Zobacz DEMO).

P. s. href można też ustawić za pomocą Javascript:
'data:application/octet-stream,' + encodeURIComponent(content);

Możesz wygenerować data URI. Istnieją jednak ograniczenia specyficzne dla przeglądarki.

Użyłem FileSaver ( https://github.com/eligrey/FileSaver.js ) i działa dobrze.
Na przykład, zrobiłem tę funkcję, aby wyeksportować dzienniki wyświetlane na stronie.
Musisz podać tablicę do instancjacji Bloba, więc może nie napisałem tego dobrze, ale dla mnie działa.
Na wszelki wypadek, bądź ostrożny z replace: to jest składnia, aby uczynić ten globalny, w przeciwnym razie zastąpi tylko pierwszą, którą spotyka.

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");
}

Znalazłem dwa proste podejścia, które działają dla mnie. Najpierw użyj już klikniętego elementu a i wstrzyknij dane pobierania. Po drugie, wygenerowanie elementu a z danymi pobierania, wykonanie a.click() i ponowne usunięcie go. Ale drugie podejście działa tylko wtedy, gdy jest wywoływane przez akcję kliknięcia użytkownika. (Niektóre) blokowanie przeglądarki click() z innych kontekstów, takich jak podczas ładowania lub wyzwalane po przekroczeniu limitu czasu (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>

Oto link do metody data URI, która Mathew zasugerował, działała na safari, ale nie za dobrze, ponieważ nie mogłem ustawić typu pliku, zostaje zapisany jako "Nieznany", a następnie muszę tam wrócić później I zmienić go, aby wyświetlić plik...

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

Możesz użyć localStorage. Jest to odpowiednik plików cookie Html5. Wygląda na to, że działa na Chrome i Firefoksie, ale na Firefoksie musiałem przesłać go na serwer. Oznacza to, że testowanie bezpośrednio na moim komputerze domowym nie działało.

Pracuję nad przykładami HTML5. Przejdź do http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html i przewiń do pierwszego labiryntu. Informacje do ponownego zbudowania labiryntu są przechowywane za pomocą localStorage.

Przyszedłem do tego artykułu szukając HTML5 JavaScript do ładowania i pracy z plikami xml. Czy jest taki sam jak starszy html i JavaScript????

Jak wcześniej wspomniano, API File wraz z API FileWriter i FileSystem mogą być używane do przechowywania plików na komputerze klienta z kontekstu karty/okna przeglądarki.

Jest jednak kilka rzeczy odnoszących się do dwóch ostatnich interfejsów API, o których powinieneś wiedzieć:

W przeciwieństwie do większości przeglądarek opartych na Chromium (Chrome i Opera), API są obecnie dostępne tylko w przeglądarkach opartych na Chromium.]}
• oba interfejsy API zostały wyłączone ze standardów W3C tor na 24 kwietnia 2014 roku i od teraz są zastrzeżone
[13]}usunięcie (obecnie zastrzeżonych) API z implementacji przeglądarek w przyszłości jest możliwością Do przechowywania plików utworzonych za pomocą interfejsów API
• a sandbox (lokalizacja na dysku, poza którym pliki nie mogą wywoływać żadnego efektu) służy]}
• a wirtualny system plików (struktura katalogów, która nie musi istnieć na dysku w takiej samej formie, jak w przypadku dostępu z poziomu przeglądarki) jest używane reprezentują pliki utworzone za pomocą API

BakedGoods*

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

Używanie plików raw, FileWriter i interfejsów API systemu plików

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);

Chociaż system plików i API FileWriter nie są już na ścieżce standardów, ich użycie może być uzasadnione w niektórych przypadkach, moim zdaniem, ponieważ:

• nie-implementujący dostawcy przeglądarek mogą umieścić je z powrotem na niej
• penetracja rynku implementujących (opartych na Chromium) przeglądarek jest wysoka
Google (główny współtwórca Chromium) nie podało daty końca życia interfejsów API.]}

*BakedGoods jest utrzymywany przez nikogo innego jak ten facet tutaj :)

Oto samouczek eksportowania plików jako ZIP:

Przed rozpoczęciem, istnieje biblioteka do zapisywania plików, nazwa biblioteki to fileSaver.js, tę bibliotekę znajdziesz tutaj. Zacznijmy od dołączenia wymaganych bibliotek:

<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>

Teraz skopiuj ten kod, a ten kod pobierze plik zip z plikiem hello.txt o treści Hello World. Jeśli wszystko działa dobrze, to pobierze plik.

<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>

Spowoduje to pobranie pliku o nazwie file.zip. Możesz Czytaj więcej tutaj: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library