写出使用vue的按钮导出excel数据功能的代码,需要调用接口连接后端数据库,并且将后端代码也写出来
时间: 2023-12-14 12:36:17 浏览: 88
前端部分代码:
```vue
<template>
<div>
<el-button type="primary" icon="el-icon-download" @click="exportExcel">导出Excel</el-button>
</div>
</template>
<script>
import axios from 'axios'
import { export_json_to_excel } from '@/utils/excelExport.js'
export default {
methods: {
exportExcel() {
axios({
url: '/api/exportExcel',
method: 'get',
responseType: 'blob' // 重要
}).then(res => {
let data = res.data
if (!data) {
return
}
let fileName = '数据列表.xlsx'
export_json_to_excel(fileName, data)
})
}
}
}
</script>
```
其中,我们使用了 `axios` 库向后端发送请求,获取导出的 Excel 文件数据,并且调用 `export_json_to_excel` 函数将数据导出为 Excel 文件。
后端部分代码(基于 Node.js 和 Express 框架):
```js
const express = require('express')
const app = express()
// 导入相关库和模块
const fs = require('fs')
const path = require('path')
const xlsx = require('node-xlsx')
const mysql = require('mysql')
// 数据库连接配置
const dbConfig = {
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
}
// 创建数据库连接池
const pool = mysql.createPool(dbConfig)
// 导出 Excel 接口
app.get('/api/exportExcel', (req, res) => {
// 查询 SQL 语句
const sql = 'SELECT * FROM user'
// 查询数据库
pool.query(sql, (err, results, fields) => {
if (err) {
console.log(err)
return
}
// 将数据转换为 Excel 文件
const data = [
['ID', '姓名', '年龄', '性别']
]
results.forEach(item => {
data.push([item.id, item.name, item.age, item.gender])
})
const buffer = xlsx.build([{
name: '数据列表',
data: data
}])
// 设置响应头部信息
res.setHeader('Content-Type', 'application/vnd.ms-excel')
res.setHeader('Content-Disposition', 'attachment;filename=' + encodeURIComponent('数据列表.xlsx'))
res.end(buffer)
})
})
// 启动服务
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000')
})
```
在后端代码中,我们使用了 `node-xlsx` 库将查询到的数据转换为 Excel 文件,并且设置响应头部信息,告诉浏览器下载该文件。
需要注意的是,前后端代码中的接口地址需要根据实际情况进行调整。
阅读全文