vue3 环境 导出内容到表格

您可以使用 Vue.js 和第三方库来从 Vue 3 环境将内容导出到表格。一个常见的方法是使用 vue-json-excel 库。以下是一个使用该库的示例：

1. 安装 vue-json-excel 库

npm install vue-json-excel

2. 在 Vue 组件中定义数据，并将其以 JSON 格式传递给 vue-json-excel

<template>
  <div>
    <button @click="exportExcel">Export to Excel</button>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in people" :key="index">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import JsonExcel from 'vue-json-excel';

export default {
  name: 'ExportToExcel',
  components: {
    JsonExcel,
  },
  data() {
    return {
      people: [
        {
          name: 'John',
          age: 25,
        },
        {
          name: 'Jane',
          age: 30,
        },
      ],
    };
  },
  methods: {
    exportExcel() {
      const data = this.people;
      const fields = ['name', 'age'];
      const title = 'People';
      this.$refs.downloadExcel.generateExcel(data, fields, title);
    },
  },
};
</script>

此代码将在组件中渲染一个包含 “Export to Excel” 按钮，和一个表格列出了人物的姓名和年龄。当用户单击按钮时，`exportExcel()` 方法中的 `generateExcel()` 函数将使用 Vue.js `$refs` 引用生成 Excel 文件并将其下载到本地计算机。

如果您需要使用不同的字段或标题创建多个表，您可以修改 `fields` 和 `title` 选项的值。