vue3 怎么实现点击保存按钮在本地创建一个文件及写入内容

在 Vue3 中，你可以利用 HTML5 的 File API 和 Blob 来实现在用户点击保存按钮时创建一个新文件并写入内容。以下是一个简单的步骤：

1. 首先，在模板 (`template` 标签内) 添加一个按钮元素，并绑定 `@click` 事件到一个函数上，这个函数会在用户点击时触发。

<button @click="handleSave">保存</button>

2. 创建一个 JavaScript 函数 `handleSave`，在这个函数里，你可以获取用户输入的内容并将其转化为 Blob 对象。

<script setup>
import { ref } from 'vue';

// 假设你有一个ref用于存储要写入的内容
const contentRef = ref('');

function handleSave() {
  // 获取用户输入的内容
  const textToWrite = contentRef.value;

  // 创建一个新的 Blob 对象，可以设置一个文本编码如 'text/plain'
  const blob = new Blob([textToWrite], { type: 'text/plain;charset=utf-8' });

  // 创建一个 URL 对象，然后通过它下载文件
  const url = URL.createObjectURL(blob);

  // 创建一个隐藏的 `a` 元素，并赋予其 `href`
  const link = document.createElement('a');
  link.href = url;
  link.download = 'output.txt'; // 文件名

  // 触发下载
  link.click();
  
  // 清理 URL 对象，防止内存泄漏
  setTimeout(() => URL.revokeObjectURL(url), 0);
}
</script>

请注意，这只是一个基础示例，实际应用中可能需要处理更多边界情况，比如错误处理、浏览器兼容性等。此外，由于安全原因，有些现代浏览器可能会阻止直接创建文件下载链接，因此可能需要在某些场景下使用其他方式，如让用户选择保存路径然后异步写入。