FileSystemAccessAPI открывает средство выбора системных файлов, но не записывает в файл

Question

У меня есть HTML-форма (работающая локально), и я хочу выгрузить ее вывод в указанное пользователем место на их локальном диске. Я форматирую поля как строку (), а затем передаю ее в этот JS-код:

writeFile.js

          // Create a handle; allow user to pick their file.
    const fileHandle = await window.showSaveFilePicker();

    // Create a FileSystemWritableFileStream to write to.
    const writableStream = await fileHandle.createWritable();

    // Write the prepared contents of the file to the stream.
    await writableStream.write(contents);

    // Close the file and write the contents to disk.
    await writableStream.close();

Затем я реализую это в HTML-коде как кнопку, которая, как мне кажется, работает должным образом:

form.html

          <input id="download_path" type="submit" class="btn" style="width: 125px" onclick="writeFile();" />

Это прямая реализация раздела «Концепции и использование» веб-документации MDN.

Откроется диалоговое окно Windows сохранения, позволяющее пользователю сохранить файл, но файл будет пустым. Я также пробовал заменить contentsс буквальной строкой, которая не отображается в файле. Я не уверен, какие еще есть способы отладки, поскольку я очень редко разрабатываю веб-приложения (хотя я знаю, что они существуют).

Я считаю, что, поскольку этот API ограничен только безопасными контекстами (https://), он не может работать в локальном html-файле (file:///). Но разве не должно быть возможности для локального файла HTML обойти это, поскольку он находится в закрытой системе?

Браузер: Chrome 88.0.4324.182

Версия для Windows: Windows 10 Pro

Answer 1

Я думаю, что нашел проблему - у меня была кнопка внутри <form>элемент, который препятствовал его полному выполнению. Откроется диалоговое окно сохранения, но файл останется пустым. Как ни странно, перемещение кнопки за пределы этого позволяет теперь отлично работать.

Answer 2

Этот API доступа к файловой системе требуется в безопасном контексте. Что я делаю, когда мне нужно запустить что-то, что требует безопасного контекста, я использую repl.it, потому что у них есть встроенный редактор кода, который мгновенно обновляется на веб-сайте. Вы также можете использовать localhost с безопасным контекстом, о котором вы можете узнать здесь . Также попробуйте изменить:

      <input id="download_path" type="submit" class="btn" style="width: 125px" onclick="writeFile();" />

к:

      <input id="download_path" type="button" class="btn" style="width: 125px" onclick="writeFile();" value="Hello" />

или в:

      <button id="download_path" class="btn" style="width: 125px" onclick="writeFile();">Hello</button>