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