0

我有一个 HTML 表单（在本地运行），我想将其输出转储到本地驱动器上用户指定的位置。我将字段格式化为字符串 ( contents)，然后将其传递给以下 JS 代码：

写文件.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 代码中将它作为一个按钮实现，我相信它可以正常工作：

表单.html

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

这是 MDN Web Docs 的“概念和用法”部分的直接实现

Windows 保存对话框打开，允许用户保存文件，但文件为空白。我也尝试用contents一个文字字符串替换，它没有出现在文件中。我不确定还有哪些其他调试方法，因为我很少开发 webapps（尽管我知道它们存在）。

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

浏览器：Chrome 88.0.4324.182

视窗版本：视窗 10 专业版

4

2 回答 2

0

此文件系统访问 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>
于 2021-02-19T17:41:58.737 回答
0

我想我找到了问题——我的按钮在<form>元素内，这阻止了它完全执行。它会打开保存对话框，但文件是空的。奇怪的是，将按钮移到外面使它现在可以正常工作。

于 2021-02-22T19:27:39.680 回答