vue3 实现打开文件夹保存文件

Vue3 本身并没有提供直接打开文件夹保存文件的 API，需要借助浏览器的原生 API 或第三方库来实现。

下面是一个使用原生 API 实现打开文件夹保存文件的例子：

<template>
  <div>
    <button @click="saveFile">保存文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    async saveFile() {
      const fileContent = '这是要保存的文件内容'
      const blob = new Blob([fileContent], { type: 'text/plain' })
      const a = document.createElement('a')
      a.download = 'example.txt'
      a.href = URL.createObjectURL(blob)
      a.click()
      URL.revokeObjectURL(a.href)
    },
  },
}
</script>

这个例子中，我们通过创建一个 Blob 对象和一个 a 标签来实现文件的保存。我们将文件内容存储在 Blob 对象中，然后将这个 Blob 对象的 URL 赋值给 a 标签的 href 属性，设置 download 属性为文件名，最后触发 a 标签的 click 事件来保存文件。在保存完文件后，我们调用 URL.revokeObjectURL 方法来释放 Blob 对象的 URL。

需要注意的是，使用这种方式保存文件时，用户需要手动选择保存文件的位置，不能直接指定保存的路径。如果需要直接指定保存的路径，可以使用 Node.js 的 fs 模块来实现，但需要在服务器端运行。