Использование HTML5 / JavaScript для генерации и сохранения файла

Question

В последнее время я возился с WebGL и заставил работать читателя Collada.Проблема в том, что он довольно медленный (Collada - очень многословный формат), поэтому я собираюсь начать преобразование файлов в более простой в использовании формат (возможно, JSON).У меня уже есть код для синтаксического анализа файла в JavaScript, так что я могу также использовать его как мой экспортер!Проблема заключается в сохранении.

Теперь я знаю, что могу проанализировать файл, отправить результат на сервер и сделать так, чтобы браузер запросил файл обратно с сервера для загрузки.Но на самом деле сервер не имеет ничего общего с этим конкретным процессом, так зачем его привлекать?У меня уже есть содержимое нужного файла в памяти.Можно ли как-то представить пользователю загрузку с использованием чистого JavaScript?(Я сомневаюсь в этом, но с таким же успехом могу спросить ...)

И чтобы быть ясным: я не пытаюсь получить доступ к файловой системе без ведома пользователей!Пользователь предоставит файл (возможно, с помощью перетаскивания), скрипт преобразует файл в памяти, и пользователю будет предложено загрузить результат.Все это должно быть "безопасным" делом в отношении браузера.

[EDIT]: Я не упомянул об этом заранее, поэтому постеры, ответившие "Flash",Достаточно правильно, но часть того, что я делаю, - это попытка подчеркнуть, что можно сделать с помощью чистого HTML5 ... так что Flash в моем случае прямо.(Хотя это совершенно правильный ответ для любого, кто делает «настоящее» веб-приложение.) В таком случае мне кажется, что мне не повезло, если я не хочу привлекать сервер.В любом случае, спасибо!

Answer 1

Вот ссылка на метод URI данных, предложенный Мэтью, он работал на сафари, но не очень хорошо, потому что я не мог установить тип файла, он сохранялся как «неизвестный», а затем мне нужно было вернуться туда позже и изменитьэто для просмотра файла ...

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

Answer 2

Вы можете использовать localStorage.Это HTML5-эквивалент файлов cookie.Похоже, что работает на Chrome и Firefox НО на Firefox, мне нужно было загрузить его на сервер.То есть тестирование непосредственно на моем домашнем компьютере не сработало.

Я работаю над примерами HTML5.Перейдите к http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html и выделите лабиринт.Информация для перестройки лабиринта хранится с использованием localStorage.

Я пришел к этой статье в поисках HTML5 JavaScript для загрузки и работы с XML-файлами.Это так же, как старые HTML и JavaScript ????

Answer 3

Как упоминалось ранее, API File вместе с API FileWriter и FileSystem могут использоваться для хранения файлов на компьютере клиента из контекставкладка / окно браузера.

Однако есть несколько вещей, относящихся к последним двум API, о которых вы должны знать:

• Реализации API в настоящее время существуют только в браузерах на основе Chromium(Chrome & Opera)
• Оба API были сняты со стандартного трека W3C 24 апреля 2014 года и на данный момент являются собственностью
• Удаление (теперь проприетарных) API изРеализация браузеров в будущем - это возможность
• A песочница (место на диске, вне которого файлы не могут оказать никакого эффекта) используется для хранения файлов, созданных с помощью API
• A виртуальная файловая система (структура каталогов, которая не обязательно существует на диске в той же форме, что и при доступе из браузера)представлять файлы, созданные с помощью API

Вот простые примеры того, как API, прямо и косвенно, используются для этого:

BakedGoods*

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

Использование сырых API File, FileWriter и FileSystem

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

Хотя API FileSystem и FileWriter больше не используютсяна уровне стандартов их использование может быть оправдано в некоторых случаях, по моему мнению, потому что:

• Возобновление интереса со стороны не реализующих поставщиков браузеров может привести их обратно к этому
• Проникновение на рынок внедряющих (на основе Chromium) браузеров велико
• Google (основной вкладчик в Chromium) не предоставил и дату окончания срока действия API-интерфейсов

«некоторые случаи» охватывают ваше собственное, однако, вам решать.

* BakedGoods поддерживается не кем иным, как этим парнем прямо здесь:)

Answer 4

Этот поток был неоценим, чтобы выяснить, как сгенерировать двоичный файл и предложить загрузить указанный файл, все в коде клиента без сервера.

Первым шагом для меня было создание двоичного двоичного объекта из данных, которые я сохранял. Существует множество примеров для выполнения этого для одного двоичного типа, в моем случае у меня есть двоичный формат с несколькими типами, который можно передать в виде массива для создания большого двоичного объекта.

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

Следующий шаг - заставить браузер предложить пользователю загрузить этот BLOB-объект с заранее заданным именем.

Все, что мне было нужно, это именованная ссылка, которую я добавил в HTML5, и которую я мог повторно использовать для переименования исходного имени файла. Я скрыл это, так как ссылка не нуждается в отображении.

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

Последний шаг - предложить пользователю загрузить файл.

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

Answer 5

Вот учебник для экспорта файлов в формате ZIP:

Перед началом работы есть библиотека для сохранения файлов, имя библиотеки - fileSaver.js. Вы можете найти эту библиотеку здесь. Давайте начнем, теперь, включите необходимые библиотеки:

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

Теперь скопируйте этот код, и этот код загрузит zip-файл с файлом hello.txt, имеющим содержимое Hello World. Если все работает нормально, файл загрузится.

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

Это загрузит файл с именем file.zip. Вы можете прочитать больше здесь: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library

Answer 6

1001 * попробовать *

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click();