Могу ли я писать файлы с помощью HTML5 / JS? - PullRequest
22 голосов
/ 30 ноября 2010

Интересно, есть ли способ записи в файлы из HTML5 / JS?В браузере ...

Ответы [ 6 ]

24 голосов
/ 27 января 2013

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

Однако, что вы можете сделать - API или нет - это проверить его со ссылкой на data: uri с атрибутом download, указывающимпредложенное имя файла.Например:

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a>

При щелчке по крайней мере в Chrome файл, содержащий текст mostly harmless (и завершающий символ новой строки), будет сохранен как earth.txt в каталоге загрузки.Чтобы установить содержимое файла из javascript, сначала вызовите эту функцию:

function setSaveFile(contents, file_name, mime_type) {
  var a = document.getElementById('save');
  mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c
  if (file_name) a.setAttribute('download', file_name);
  a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || '');
}
19 голосов
/ 30 ноября 2010

Да, с использованием нового API FileWriter.

http://www.w3.org/TR/file-writer-api/

Вы можете увидеть текущую поддержку браузера здесь: http://caniuse.com/#feat=filesystem

4 голосов
/ 08 октября 2012

Да, можно читать и писать файлы, используя HTML5 + JS.

Ссылка для начала работы - Изучение API FileSystem

Я также написал статьювернемся к SpeckyBoy на ту же тему, которая может оказаться вам полезной - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

1 голос
/ 07 июля 2016

Ответ на этот вопрос зависит от ваших ответов на следующие вопросы:

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

Если вы ответили «да» на все вышеперечисленное, то да, с помощью API FileWriter и FileSystem вы можете записывать файлы из контекста вкладки / окна браузера, используяJavascript.

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

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

С BakedGoods *, библиотекой Javascript, которая устанавливаетединое целоеПри использовании интерфейса, который может использоваться для выполнения общих операций хранения во всех собственных (включая FileSystem), и некоторых не собственных средствах хранения, вышеупомянутое достигается с помощью этого:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", type: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Спецификация FileSystem не определяет руководящие принципы относительно того, какструктуры каталогов должны появиться на диске.В браузерах на основе Chromium, например, песочница имеет виртуальную файловую систему (структура каталогов, которая не обязательно существует на диске в той же форме, что и при доступе из браузера), в которойкаталоги и файлы, созданные с помощью API, размещаются.

Так что, хотя вы и можете записывать файлы в систему с помощью API, поиск файлов без API (ну, без API FileSystem) может быть нетривиальным делом.

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

1 голос
/ 29 июня 2016

Другая возможность - рассмотреть возможность создания чего-то вроде приложения ClickOnce на платформе Windows. Это предоставит ссылку на загружаемый исполняемый файл, который будет работать в операционной системе пользователя, но может выполнять обратные вызовы через Интернет для отправки и получения данных. Приложение ClickOnce может включать в себя элемент управления браузером, и поэтому у вас будет веб-совместимое приложение с возможностью напрямую общаться с хранилищем пользователя.

1 голос
/ 30 ноября 2010

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

Если вам просто нужно сохранить некоторые данные, чтобы ваша страница могла получить к ним доступ позже, в HTML5 есть нечто, называемое Веб-хранилище, которое может это сделать.

Или вы можете хранить данные в файлах cookie (если они очень маленькие) или на сервере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...