Question

我正在开发一个类似于图形编辑器的 Web 应用程序，它允许用户插入框、绘制连接等。

在尝试实现保存和另存为功能时，我一直在思考如何在本地保存文件。我尝试使用 a 属性创建 download 标签，然后触发它们的点击事件，但它不允许重命名和选择目录。相反，每次用户点击“保存”时，它都会开始新的下载，从而导致 Downloads 文件夹中出现大量重复项。

function downloadFile(myFileName, myContent) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(myContent));
    pom.setAttribute('download', myFileName);
    pom.click();
}

我希望它如何工作，例如，diagrams.net。使用设备存储创建新文件时，它首先启动“另存为”框，询问名称和目录。之后，当点击保存时，已经创建的文件将被覆盖，而不是下载文件的另一个版本。

我应该怎么做才能使用 Javascript 实现这一目标？

Answer 1

diagrams.net 使用全新的实验性 File System Access API 来做到这一点。截至 2021 年 2 月，仅 Chrome Edge 和 Opera 支持此功能

它提供了函数showSaveFilePicker，这里是一个如何使用它的例子。

if("showSaveFilePicker" in window) {
  try {
    const file = window.showSaveFilePicker({
      types: [
        {
          description: "An XML File",
          accept: {"text/xml": [".xml"]}
        },
        {
          description: "A Text File",
          accept: {"text/plain": [".txt", ".text"]}
        }
      ]
    })
  } catch (e) {
    console.error(e)
  }
} else {
  alert("Your Browser does not support the FSA API")
  // use <a download></a> fallback
}

请注意，我无法添加可执行代码片段，因为沙盒脚本（例如：在 IFrame 中不允许显示文件选择器。

如何使用 Javascript 在不下载的情况下实现保存和另存为？

1 个答案: