Vue3 响应式数据导出为 CSV 文件 - 完整示例及代码解析

在 Vue3 中，你可以使用<script setup>语法来导入和导出数据。下面是一个将响应式数据导出为 CSV 文件的示例：

<template>
  <div>
    <button @click="exportToCSV">Export to CSV</button>
  </div>
</template>

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

// 假设以下数据是响应式的
const data = ref([
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
]);

const exportToCSV = () => {
  const csvContent = 'data:text/csv;charset=utf-8,';
  
  // 添加CSV文件的标题行
  const titles = Object.keys(data.value[0]).join(',');
  csvContent += titles + '\n';

  // 添加数据行
  data.value.forEach((item) => {
    const row = Object.values(item).join(',');
    csvContent += row + '\n';
  });

  // 创建一个隐藏的下载链接并模拟点击
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement('a');
  link.setAttribute('href', encodedUri);
  link.setAttribute('download', 'data.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

在上面的示例中，我们首先定义了一个响应式的data变量，它包含了一些数据。然后，我们定义了一个exportToCSV方法，该方法将数据导出为 CSV 文件。

在exportToCSV方法中，我们首先创建了一个空的 CSV 内容字符串，并添加了标题行。然后，我们遍历数据数组，将每一行的值转换为逗号分隔的字符串，并将其添加到 CSV 内容字符串中。接下来，我们创建一个隐藏的下载链接，并将 CSV 内容字符串作为链接的href属性值。最后，我们模拟点击下载链接以开始下载 CSV 文件。

请注意，上述示例中的代码是在 Vue 组件中使用<script setup>语法编写的。<script setup>语法是 Vue3 中的新特性，它允许我们以更简洁的方式编写组件的逻辑代码。