文件系统访问 API 打开系统文件选取器，但不写入文件

Question

我有一个HTML表单(在本地运行)，我想将其输出转储到用户指定的本地驱动器上的位置。我将字段格式化为字符串(contents)，然后将其传递给这个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 Web Docs

Windows保存对话框打开，允许用户保存文件，但文件是空白的。我还尝试用文字字符串替换contents，这在文件中没有显示。我不确定还有什么其他的方法来调试，因为我很少开发web应用程序(尽管我知道它们存在)。

我的想法是，因为这个API仅限于安全上下文(https://)，它不能运行在本地html文件(file:///)。但是，既然本地HTML文件是在一个封闭的系统中，难道不应该有一种方法来绕过这一点吗?

浏览器:Chrome 88.0.4324.182

Windows版本:Windows 10 Pro

Answer 1

这个文件系统访问API在安全上下文中是必需的。当我需要运行需要安全上下文的东西时，我使用repl。这是因为他们有一个内置的代码编辑器，可以在网站上即时更新。您还可以在安全上下文中使用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>

Answer 2

我想我发现了这个问题-我有我的按钮在<form>元素，这是阻止它完全执行。它将打开保存对话框，但文件将为空。奇怪的是，把这个按钮移到外面，现在就可以完美地工作了。