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 是 Blob
      const 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-input
        v-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：

1. 后端返回的是 二进制 Excel 文件流。

2. Axios 默认把响应当作 JSON → 返回的是对象 → 传给 Blob 就是 [object Object]。

3. 解决方法：在 Axios 请求中加上 responseType: 'blob'，告诉浏览器直接获取二进制流。

导出成功的效果：

四、总结

1. 前端 ：导出按钮 + exportExcel() 方法 + Axios responseType: 'blob'。

2. 后端：Spring Boot + EasyExcel 输出 Excel 文件流。

3. 表格数据：可以在浏览器表格中直接修改销售单价，导出 Excel 后用户编辑，重新导入系统进行计算。

4. 核心原理：

   • [object Object] 出现是因为 没有使用 blob。

   • 使用 Blob + URL.createObjectURL 可以在浏览器端生成下载文件。