帮我写一个vue3文件回显可下载的组件

在Vue 3中，你可以创建一个名为`DownloadFile.vue`的组件，它允许用户点击按钮下载内容。这里是一个简单的示例：

<template>
  <div class="download-file-component">
    <button @click="handleDownload" :disabled="isLoading">点击下载</button>
    <span v-if="isLoading">正在下载...</span>
  </div>
</template>

<script>
export default {
  name: 'DownloadFile',
  data() {
    return {
      contentToDownload: '这是一段需要下载的内容', // 这里可以替换成实际的数据
      isLoading: false,
    };
  },
  methods: {
    handleDownload() {
      this.isLoading = true;
      setTimeout(() => {
        // 模拟异步下载过程，实际上你可以在这里处理文件流
        const blob = new Blob([this.contentToDownload], { type: 'text/plain;charset=utf-8' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.txt'; // 下载文件名
        document.body.appendChild(a); // 需要在body中添加元素才能触发下载
        a.click();
        window.URL.revokeObjectURL(url); // 取消引用释放内存
        this.isLoading = false;
      }, 2000);
    },
  },
};
</script>

<style scoped>
.download-file-component {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-bottom: 10px;
}
</style>

在这个组件中，当用户点击“点击下载”按钮时，会模拟一个异步下载操作，实际上是将数据转换成了Blob对象并通过点击链接的方式让用户下载。