基于express框架实现excel导出功能

相信有很多小伙伴遇到过列表导出excel这一业务需求。下面是使用express+mysql实现将数据库中的数据导出为excel的操作步骤：

1.安装必要的依赖

npm install express mysql node-xlsx

2.接着，我们可以构建一个Express服务器，并连接MySQL数据库：

const express = require('express');
const mysql = require('mysql');
const app = express();

// 连接MySQL数据库
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'database_name'
});
connection.connect();

// 查询所有数据
app.get('/api/data', (req, res) => {
  connection.query('SELECT * FROM data', (error, results, fields) => {
    if (error) throw error;
    res.send(results);
  });
});

// 导出Excel
app.get('/api/export', (req, res) => {
  // 获取需要导出的数据
  const { data } = req.body;

  // 定义excel表格的表头和内容
  const excelData = [
    ['姓名', '年龄', '性别'],
    ...data.map(item => [item.name, item.age, item.gender])
  ];

  // 使用node-xlsx模块生成excel文件
  const buffer = xlsx.build([{name: "Sheet1", data: excelData}]);

  // 设置返回的http header信息，告诉浏览器该文件是一个excel文件
  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  res.setHeader('Content-Disposition', 'attachment; filename=' + encodeURIComponent('导出数据.xlsx'));

  // 将生成的excel文件发送给客户端
  res.send(buffer);
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这里我们定义了两个路由，一个用于查询所有数据，另一个用于导出Excel文件。在导出Excel时，我们使用了xlsx库将查询结果转换为Excel文件。

接下来，我们可以构建一个Vue应用程序，并通过axios库调用上述API：

<template>
  <div>
    <button @click="getData">查询数据</button>
    <button @click="exportData">导出Excel</button>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      rows: []
    };
  },
  methods: {
    getData() {
      axios.get('/api/data').then(response => {
        this.rows = response.data;
      });
    },
    exportData() {
      const data = this.rows
      axios.get('/api/export', { data }, { responseType: 'blob' }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'data.xlsx');
        document.body.appendChild(link);
        link.click();
      });
    }
  }
};
</script>

这里我定义了两个按钮，一个用于查询数据，另一个用于导出Excel文件。当用户点击“导出Excel”按钮时，使用responseType: 'blob’选项告诉Axios我们需要一个二进制响应。然后，创建一个Blob URL并将其附加到一个链接元素上，以便用户可以下载Excel文件。