用vue3+ts实现文件导出

在vue3+ts中实现文件导出可以使用FileSaver.js库，该库可以将数据流转换为文件并下载到本地。

首先，安装FileSaver.js库：

npm install file-saver --save

然后，在需要导出文件的组件中，定义一个方法来处理导出操作：

import { saveAs } from 'file-saver';

export default {
  methods: {
    handleExport() {
      // 模拟导出数据
      const data = [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 25 },
      ];

      // 构造CSV文件内容
      const csvContent = 'data:text/csv;charset=utf-8,';
      csvContent += 'id,name,age\n';
      data.forEach((item) => {
        csvContent += `${item.id},${item.name},${item.age}\n`;
      });

      // 将CSV文件内容转换为Blob对象
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

      // 下载文件
      saveAs(blob, 'data.csv');
    },
  },
};

在上面的代码中，我们使用了FileSaver.js库的saveAs方法来下载文件。首先，我们将CSV文件内容构造成一个data URI字符串，然后将其转换为Blob对象，最后使用saveAs方法下载文件。

注意，由于涉及到文件下载，该方法需要在用户主动触发后才能执行，例如在点击按钮时执行。