vue3 怎么把数据导出到一个设置好的模板excel中

要将 Vue3 中的数据导出到一个设置好的模板 Excel 中，你可以使用以下步骤：

1. 安装 `xlsx` 和 `file-saver` 库，用于生成和保存 Excel 文件。

npm install xlsx file-saver

2. 创建一个函数，用于将数据转换为 Excel 格式。

import XLSX from 'xlsx';

function formatExcelData(data) {
  const sheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
  return workbook;
}

3. 创建一个事件处理函数，用于在点击按钮时将数据导出到 Excel 文件中。

import { saveAs } from 'file-saver';

function exportToExcel(data) {
  const workbook = formatExcelData(data);
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const excelBlob = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(excelBlob, 'example.xlsx');
}

4. 在 Vue3 中，你可以将数据绑定到一个按钮或其他触发事件上，然后调用 `exportToExcel` 函数。

<template>
  <button @click="exportData">导出数据</button>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive([
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      { name: '王五', age: 30 },
    ]);

    const exportData = () => {
      exportToExcel(data);
    };

    return {
      exportData,
    };
  },
};
</script>

这样，当用户点击“导出数据”按钮时，Vue3 就会将数据导出到一个设置好的模板 Excel 文件中。