首页vue从后端获取到数据后如何将数据导出为一张excel表

vue从后端获取到数据后如何将数据导出为一张excel表

时间: 2024-02-01 12:14:07 浏览: 89

可以使用第三方库`xlsx`来实现将数据导出为Excel表格，以下是具体的步骤： 1. 安装`xlsx`库：在命令行中执行`npm install xlsx --save`。 2. 在vue组件中引入`xlsx`：`import XLSX from 'xlsx'`。 3. 将数据转换为`xlsx`格式：使用`XLSX.utils.json_to_sheet()`方法将JSON格式的数据转换为`Sheet`格式。 4. 生成`Workbook`对象：使用`XLSX.utils.book_new()`创建一个`Workbook`对象，并将`Sheet`添加到其中。 5. 导出Excel表格：使用`XLSX.writeFile()`方法将`Workbook`对象导出为Excel表格。下面是具体的代码示例： ```javascript <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx' export default { methods: { exportExcel () { // 模拟从后端获取到的数据 const data = [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ] // 将数据转换为Sheet格式 const sheet = XLSX.utils.json_to_sheet(data) // 创建Workbook对象，并将Sheet添加到其中 const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1') // 导出Excel表格 XLSX.writeFile(workbook, 'data.xlsx') } } } </script> ``` 在上面的代码中，我们在`exportExcel()`方法中模拟了从后端获取到的数据，然后将数据转换为`Sheet`格式，创建了`Workbook`对象并将`Sheet`添加到其中，最后使用`XLSX.writeFile()`方法将`Workbook`对象导出为Excel表格。

阅读全文