如何在Vue + Node项目中实现MySQL数据的导出为Excel报表功能?

秋磊小哥_6728

秋磊小哥_6728

2026-06-07

927人浏览

原创

mysql查询结果转excel应采用流式分页查询+node-xlsx流式写入,设置content-type、content-disposition和content-length响应头,前端axios配responsetype: 'blob',避免oom和乱码。

如何在vue + node项目中实现mysql数据的导出为excel报表功能?

MySQL查询结果怎么转成Excel文件? 直接用 node-xlsx 或 xlsx 库最稳。别碰 excel-export 这类老库,不维护、不支持 Buffer 流式写入,大数据量导出会 OOM。核心思路是:Node 层查 MySQL → 转成二维数组或对象数组 → 用 xlsx 生成工作表 → 设置响应头触发浏览器下载。
  • xlsx 支持 SheetJS 全特性,能处理日期、数字格式、合并单元格(虽然报表导出一般不需要)
  • 查询必须加 rowsAsArray: true(mysql2)或手动映射字段名,否则对象键顺序不确定,Excel 列会错乱
  • 千万别在 Express 的 res.send() 里直接传 Buffer,要用 res.end(buffer, 'binary') 或 res.send(Buffer.from(...)),否则中文变乱码

Express 接口怎么设响应头才让浏览器弹保存框? 关键就三行响应头,少一个都可能失败:
  • Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  • Content-Disposition: attachment; filename="report.xlsx"(注意 filename 不要带路径、不要空格、最好用英文+下划线)
  • Content-Length: ${buffer.length}(可选但建议加上,避免 Safari 下载卡住)

如果前端用 axios 请求,记得配 responseType: 'blob';用 fetch 就得手动调 res.arrayBuffer() 再转 blob。否则返回的是一串乱码字符串,不是文件。

excel-toolkit
excel-toolkit

创建、检查和编辑 Microsoft Excel 工作簿及 XLSX 文件,具备可靠的公式、日期、类型、格式、重新计算和模板保留功能...

下载

大表导出卡死或内存爆掉怎么办? MySQL 查 10 万行以上数据时,connection.query() 默认把全部结果加载进内存,Node 进程很容易被系统 kill。必须改成分页流式读取:
  • 用 connection.query('SELECT ...').on('result', callback)(mysql2 支持)
  • 每次拿到一批行(比如 1000 条),push 到临时数组,达到阈值就调一次 worksheet.addRows()
  • 最后一次性 workbook.writeBuffer() 输出,别每条都 write
  • 更稳妥的做法是加个定时器,每 5 秒 res.write() 一点心跳数据,防 Nginx / 负载均衡超时断连

Vue 端点击导出按钮后没反应?检查这几点 常见静默失败原因:
  • 后端接口返回 200 但内容是 JSON(比如 { code: 500, msg: 'db error' }),而前端没判断 status,直接当 Excel 处理 → 结果下载一个打不开的 .xlsx 文件
  • 前端用了 router-link 或普通 <a></a> 标签,但没加 download 属性,且后端没设 Content-Disposition → 浏览器直接渲染二进制内容,页面变白屏
  • 导出请求走了 Vue Router 的 history 模式,路径被重写,实际请求 404 → 打开浏览器 Network 面板看真实请求 URL 和状态码
  • 用户点了多次,后端没做防重复(比如用 Redis 锁住同一用户 60s 内只能导一次),导致连接堆积、MySQL 连接数耗尽

导出功能看着简单,真正上线后最常出问题的是边界:空数据怎么显示表头、时间字段要不要格式化为 YYYY-MM-DD、导出中途数据库连接断了怎么通知用户——这些都得在代码里显式处理,不能依赖库默认行为。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vue node mysql excel

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
mysql修改数据表名
mysql修改数据表名

MySQL修改数据表:1、首先查看数据库中所有的表,代码为:‘SHOW TABLES;’;2、修改表名,代码为:‘ALTER TABLE 旧表名 RENAME [TO] 新表名;’。php中文网还提供MySQL的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

2093

6

MySQL创建存储过程
MySQL创建存储过程

存储程序可以分为存储过程和函数,MySQL中创建存储过程和函数使用的语句分别为CREATE PROCEDURE和CREATE FUNCTION。使用CALL语句调用存储过程智能用输出变量返回值。函数可以从语句外调用(通过引用函数名),也能返回标量值。存储过程也可以调用其他存储过程。php中文网还提供MySQL创建存储过程的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.21

1279

5

mongodb和mysql的区别
mongodb和mysql的区别

mongodb和mysql的区别:1、数据模型;2、查询语言;3、扩展性和性能;4、可靠性。本专题为大家提供mongodb和mysql的区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.18

755

5

mysql密码忘了怎么查看
mysql密码忘了怎么查看

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS 应用软件之一。那么mysql密码忘了怎么办呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.19

2832

5

mysql创建数据库
mysql创建数据库

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS 应用软件之一。那么mysql怎么创建数据库呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.25

4708

4

mysql默认事务隔离级别
mysql默认事务隔离级别

MySQL是一种广泛使用的关系型数据库管理系统,它支持事务处理。事务是一组数据库操作,它们作为一个逻辑单元被一起执行。为了保证事务的一致性和隔离性,MySQL提供了不同的事务隔离级别。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2023.08.08

1079

3

sqlserver和mysql区别
sqlserver和mysql区别

SQL Server和MySQL是两种广泛使用的关系型数据库管理系统。它们具有相似的功能和用途,但在某些方面存在一些显著的区别。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.11

4971

4

mysql忘记密码
mysql忘记密码

MySQL是一种关系型数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。那么忘记mysql密码我们该怎么解决呢?php中文网给大家带来了相关的教程以及其他关于mysql的文章,欢迎大家前来学习阅读。

2023.08.14

4422

7

mysql事务隔离级别
mysql事务隔离级别

mysql规范中定义了四种事务隔离级别,不同的隔离级别对事务的处理有所不同。本专题为大家提供mysql事务隔离级别相关的文章内容,大家可以免费体验。

2023.08.16

5794

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习