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

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

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

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

Хорошо, создание данных: URI определенно помогает мне, благодаря Мэтью и Деннкстеру, указавшим эту возможность! Вот как я это делаю:

1) получить весь контент в строку с именем «content» (например, создав его там изначально или прочитав innerHTML тега уже созданной страницы).

2) Создайте URI данных:

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

Будут ограничения по длине в зависимости от типа браузера и т. Д., Но, например, Firefox 3.6.12 работает по крайней мере до 256 КБ. Кодирование в Base64 вместо использования encodeURIComponent может сделать вещи более эффективными, но для меня это было нормально.

3) откройте новое окно и «перенаправьте» его на этот URI, запрашивая местоположение загрузки моей страницы, созданной JavaScript:

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

Вот и все.

Простое решение для 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();
    }
}

использование

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

HTML5 определяет window.saveAs(blob, filename)метод. Это не поддерживается ни одним браузером сейчас. Но есть библиотека совместимости под названием FileSaver.js, которая добавляет эту функцию в большинство современных браузеров (включая Internet Explorer 10+). Internet Explorer 10 поддерживает navigator.msSaveBlob(blob, filename)метод ( MSDN ), который используется в FileSaver.js для поддержки Internet Explorer.

Я написал сообщение в блоге с более подробной информацией об этой проблеме.

Сохранение больших файлов

Длинные URI данных могут вызвать проблемы с производительностью в браузерах. Другой вариант сохранения сгенерированных на стороне клиента файлов - поместить их содержимое в объект Blob (или файл) и создать ссылку для загрузки с помощью URL.createObjectURL(blob). Это возвращает URL, который можно использовать для получения содержимого большого двоичного объекта. BLOB-объект хранится в браузере до тех пор, пока не URL.revokeObjectURL()будет вызван URL-адрес или документ, который его создал, закрыт. Большинство веб-браузеров поддерживают URL-адреса объектов , Opera Mini - единственный, который их не поддерживает.

Принудительное скачивание

Если данные представляют собой текст или изображение, браузер может открыть файл, а не сохранять его на диск. Чтобы файл был загружен при нажатии на ссылку, вы можете использовать downloadатрибут. Однако не все веб-браузеры поддерживают атрибут загрузки . Другим вариантом является использование application/octet-streamв качестве mime-типа файла, но это приводит к тому, что файл представляется в виде двоичного двоичного объекта, что особенно неудобно для пользователя, если вы не указали имя файла или не можете его указать. См. Также « Принудительно открывать всплывающее окно« Сохранить как ... »при открытии текстовой ссылки, нажмите pdf в HTML »

Указание имени файла

Если BLOB-объект создается с помощью конструктора файлов, вы также можете задать имя файла, но только несколько веб-браузеров (включая Chrome и Firefox) поддерживают конструктор файлов . Имя файла также может быть указано в качестве аргумента downloadатрибута, но это зависит от тонны соображений безопасности . Internet Explorer 10 и 11 предоставляет собственный метод msSaveBlob для указания имени файла.

Пример кода

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

Взгляните на Doug Neiner's Downloadify, который является JavaScript-интерфейсом на основе Flash для этого.

Downloadify - это небольшая библиотека JavaScript + Flash, которая позволяет создавать и сохранять файлы на лету, в браузере, без взаимодействия с сервером.

Простое решение!

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

Работает во всех современных браузерах.

Вы можете сгенерировать URI данных . Тем не менее, существуют ограничения для браузера.

Я использовал FileSaver ( https://github.com/eligrey/FileSaver.js ), и он отлично работает.
Например, я сделал эту функцию для экспорта журналов, отображаемых на странице.
Вы должны передать массив для создания экземпляра BLOB-объекта, так что я просто, возможно, не написал это правильно, но это работает для меня.
На всякий случай, будьте осторожны с заменой: это синтаксис, чтобы сделать этот глобальный, иначе он заменит только первый, который он встретит.

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

Я нашел два простых подхода, которые работают для меня. Во-первых, используя уже выбранный aэлемент и добавляя данные для загрузки. И, во-вторых, создание aэлемента с данными загрузки, выполнение a.click()и удаление его снова. Но второй подход работает только в том случае, если он вызывается действием пользователя. (Некоторые) Блокировка браузера click()из других контекстов, например, при загрузке или срабатывание после тайм-аута (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>

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

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

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

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

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

пытаться

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

Если вы хотите скачать двоичные данные, посмотрите здесь

Обновить

2020.06.14 Я обновляю Chrome до 83.0 и выше, так что остановка фрагмента работает (из-за ограничений безопасности песочницы ) - но версия JSFiddle работает - здесь

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

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

• Реализации API в настоящее время существуют только в браузерах на основе Chromium (Chrome & Opera)
• 24 апреля 2014 года оба API-интерфейса были выведены из-под контроля стандартов W3C и являются собственностью компании.
• Удаление (теперь проприетарных) API из реализации браузеров в будущем возможно
• песочница хранения файлов, созданных с помощью API, используется (место на диске, вне которого файлы не могут оказывать никакого влияния)
• Виртуальная файловая система (структура каталогов , которая не обязательно существует на диске в той же форме , что делает , когда доступ из браузера) используется представляют файлы , созданные с помощью 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 более не соответствуют стандартам, их использование в некоторых случаях может быть оправдано, на мой взгляд, потому что:

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

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

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

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

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

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

Вот учебник для экспорта файлов в формате 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