Браузер Chrome поддерживает чтение и запись локальных файлов напрямую

Chrome

Эта статья была впервые опубликована в публичном аккаунте: CoyPan, как и ожидалось.

написать впереди

Последняя версия Chrome (Chrome 83, требуется разрешение) поддерживает прямое чтение и запись локальных файлов.

Как открыть: обновить браузер Chrome до версии 83 или выше; посетите Chrome: // Флаги / и включите опцию собственной файловой системы API

Как в настоящее время читать и записывать локальные файлы

В настоящее время наиболее распространенный способ чтения локальных файлов:

1. Используйте тег ввода, чтобы получить объект файла файла.

<input type="file" />

2. Используйте FileReader для чтения файла.

var reader = new FileReader();
reader.onload = function (event) {
    // event.target.result就是读取的内容
    ...
};
// 这里的file为File对象实例
reader.readAsText(file);
// reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);

Метод записи файла:

К сожалению, в настоящее время нет возможности записывать файлы напрямую в локальный. Однако, вероятно, это может быть достигнуто следующим образом:

var textFileAsBlob = new Blob(['hello word'], {type:'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = 'test.txt';
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.click();

Как читать и записывать файлы в последней версии браузера Chrome

прочитать файл

использоватьwindow.chooseFileSystemEntriesэто апи. Следует отметить, что при вызове этого APIДолжен запускаться действием пользователя, такие как клики и т. д.

// 文件句柄
let fileHandle;
button.addEventListener('click', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  console.log(fileHandle);
});

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

Затем вызовите метод handle, чтобы получить содержимое файла.

let fileHandle;
button.addEventListener('click', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  const file = await globalFileHandle.getFile();
  const contents = await file.text(); // 这里的方法还有：slice(), stream(), arrayBuffer()
});

записать файл

Запись файла делится на два случая: один — запись непосредственно в исходный файл, а другой — запись в новый файл.

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

  const writable = await fileHandle.createWritable();
  await writable.write('new content');
  await writable.close();

Чтобы записать новый файл, вам сначала нужно создать новый файл, по-прежнему вызываяwindow.chooseFileSystemEntriesЭто API, но на этот раз вам нужно передать некоторые параметры.

button.addEventListener('click', async function() {
	const opts = {
      type: 'save-file',
      accepts: [{
          description: 'Text file',
          extensions: ['txt'],
          mimeTypes: ['text/plain'],
      }]
  };
  // 新建文件的句柄
  const fileHandle = await window.chooseFileSystemEntries(opts);
  ...             
});

Затем следуйте предыдущему методу, чтобы написать содержимое.

Дополнительные сведения о чтении и записи локальных файлов см. в этой статье:Web.Dev/родной-файл…

Пример демонстрации

Новый файл Api очень удобен. Я просто написал демо для редактирования локальных файлов в браузере.

Адрес и код демонстрационной версии находятся здесь (используйте последнюю версию настольного браузера Chrome для доступа и включите разрешения на чтение и запись файлов):

co жесткий диск.info/demo/chrome…

написать на обороте

Что вы думаете об этой волне обновлений Chrome? веб-приложение? веб ОС?

Категории