vue2把后端响应数据保存ex表格

在 Vue 中实现点击按钮将后端响应的数据导出为 .xlsx 文件，可以使用 axios 进行数据请求，并结合 xlsx 和 file-saver 库完成文件的生成和下载。

以下是完整实现步骤：

1. 安装依赖库

运行以下命令安装所需的库：

npm install xlsx file-saver axios

2. 创建导出功能

组件代码示例

<template>
  <div>
    <button @click="exportExcel">导出数据为 Excel 文件</button>
  </div>
</template>

<script>
import axios from "axios";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";

export default {
  name: "ExportExcel",
  methods: {
    async exportExcel() {
      try {
        // 发送请求获取后端数据
        const response = await axios.get("/api/v1/data-to-export", {
          responseType: "json", // 确保返回的数据是 JSON 格式
        });

        // 假设后端返回的数据结构如下：
        // response.data = [
        //   { name: "张三", age: 25, city: "杭州" },
        //   { name: "李四", age: 30, city: "上海" }
        // ]

        const data = response.data;

        // 将数据转换为工作表格式
        const worksheet = XLSX.utils.json_to_sheet(data);

        // 创建工作簿并添加工作表
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "活跃数据");

        // 将工作簿转换为 Blob 对象
        const excelBuffer = XLSX.write(workbook, {
          bookType: "xlsx",
          type: "array",
        });

        // 使用 file-saver 保存文件
        const blob = new Blob([excelBuffer], {
          type: "application/octet-stream",
        });
        saveAs(blob, "活跃数据.xlsx");
      } catch (error) {
        console.error("导出失败:", error);
      }
    },
  },
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>

3. 后端响应接口

确保后端接口返回 JSON 格式的数据。例如：

Node.js 示例

app.get("/api/v1/data-to-export", (req, res) => {
  const data = [
    { name: "张三", age: 25, city: "杭州" },
    { name: "李四", age: 30, city: "上海" },
  ];
  res.json(data);
});

4. 功能解析

• axios.get(): 从后端获取数据。
• XLSX.utils.json_to_sheet(): 将 JSON 数据转换为工作表。
• XLSX.utils.book_new() 和 XLSX.utils.book_append_sheet(): 创建工作簿并附加工作表。
• XLSX.write(): 将工作簿转换为二进制数据。
• file-saver 的 saveAs(): 将 Blob 对象保存为文件并触发下载。

5. 效果

点击按钮时，将触发请求，获取后端数据，并生成并下载 .xlsx 文件。下载文件名为 活跃数据.xlsx。

如果有更多需求（如文件格式或数据处理），可以在转换前对数据进行处理或增加其他逻辑。