Vue + Spring Boot 实现 Excel 导出实例
一、前端实现
1. 导出按钮
在 el-tab-pane 中放置一个导出按钮：
<div style="margin-bottom: 10px;"><el-button type="primary" size="mini" @click="exportExcel">导出成品提库</el-button>
</div>
点击按钮后调用 exportExcel 方法。
2. Axios 封装接口
前端使用 Axios 请求后端导出接口，并使用 responseType: 'blob' 获取二进制流：
如下图：
3. 导出方法实现
exportExcel() {const orderNumber = this.fieldForm.orderNumber;exportModalBillHeadAPI({ orderNumber }).then(res => {// Axios 返回 data 是 Blobconst blob = res.data || res;const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download', `成品提库-${orderNumber}.xlsx`);document.body.appendChild(link);link.click();link.remove();window.URL.revokeObjectURL(url); // 释放内存}).catch(err => {console.error('导出 Excel 错误:', err);this.$message.error('导出失败');});
}
说明：
responseType: 'blob'：告诉 Axios 不要把响应解析为 JSON，而是原始二进制文件流。window.URL.createObjectURL(blob)：生成浏览器可下载的 URL。link.click()：模拟点击下载。window.URL.revokeObjectURL(url)：释放内存。
4. 表格展示与可编辑字段
前端 el-table 显示成品提库数据，并允许用户在表格中编辑销售单价：
<el-table :data="modalCostList" style="width: 100%"><el-table-column prop="orderNumber" label="项目订单" /><el-table-column prop="doCno" label="转换单号" /><el-table-column prop="itemCode" label="料号" /><el-table-column prop="itemName" label="品名" /><!-- 可编辑销售单价 --><el-table-column label="销售单价（元/KG）" prop="purchasePrice"><template slot-scope="scope"><el-inputv-model="scope.row.purchasePrice":step="0.01"size="mini"type="number"style="width: 80px;"@input="calculateInventoryBalance"/></template></el-table-column><!-- 其他计算列，如结余价值、合计金额、增值税等 --><el-table-column label="结余价值" prop="balanceValue"><template slot-scope="scope"><span>{{ (scope.row.purchasePrice * scope.row.deliveryRatio).toFixed(2) }}</span></template></el-table-column>
</el-table>
二、后端实现
使用 Spring Boot + EasyExcel 导出 Excel 文件。
1. Controller 方法
@PostMapping("/export/{orderNumber}")
@Operation(summary = "导出 SQL Server 成品提库数据（可编辑）")
public void exportModalBillHead(@PathVariable String orderNumber, HttpServletResponse response) throws Exception {// 查询数据List<ModalBillHeadVO> list = modalBillHeadService.getQueryOrderInfo(orderNumber);// 设置文件名和响应类型String fileName = (list == null || list.isEmpty()) ? "成品提库模板" : "成品提库导出";response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");String encodedFileName = URLEncoder.encode(fileName, "UTF-8").replaceAll("\\+", "%20");response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + encodedFileName + ".xlsx");// 使用 EasyExcel 导出EasyExcel.write(response.getOutputStream(), ModalBillHeadVO.class).sheet("成品提库").doWrite(list == null ? new ArrayList<>() : list);
}
2.说明：
EasyExcel.write(response.getOutputStream(), ModalBillHeadVO.class)：把List<ModalBillHeadVO>数据直接写入 Excel。前端点击下载按钮时，浏览器会接收到 Excel 文件流。
三、为什么导出 Excel 出现 [object Object]？
如下图：
出现 [object Object] 的原因主要是 Axios 默认解析响应为 JSON：
后端返回的是 二进制 Excel 文件流。
Axios 默认把响应当作 JSON → 返回的是对象 → 传给
Blob就是[object Object]。解决方法：在 Axios 请求中加上
responseType: 'blob'，告诉浏览器直接获取二进制流。
导出成功的效果：
四、总结
前端：导出按钮 +
exportExcel()方法 + AxiosresponseType: 'blob'。后端：Spring Boot + EasyExcel 输出 Excel 文件流。
表格数据：可以在浏览器表格中直接修改销售单价，导出 Excel 后用户编辑，重新导入系统进行计算。
核心原理：
[object Object]出现是因为 没有使用 blob。使用
Blob+URL.createObjectURL可以在浏览器端生成下载文件。