Springboot与vue实现数据导出方法具体介绍

下面我将详细讲解“Springboot与vue实现数据导出方法具体介绍”的完整攻略。

一、准备工作

在开始实现前，需要准备以下环境：

• Java环境：安装JDK1.8+
• Maven环境：安装Maven
• Vue环境：安装Vue.js
• IDE：推荐使用IDEA或Eclipse

二、后端实现

1. 在Springboot项目中添加Maven依赖

在pom.xml文件中添加以下依赖：

<!--导出excel-->
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>4.1.2</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.1.2</version>
</dependency>

<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

1. 编写后端导出Excel的Controller

在Controller中提供一个接口，通过该接口可以实现导出Excel功能。

@GetMapping(value = "/export")
public void export(HttpServletResponse response) {
    // 设置导出文件的名称和格式
    String fileName = "导出数据.xlsx";
    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);

    try {
        // 创建Excel文档
        XSSFWorkbook wb = new XSSFWorkbook();
        XSSFSheet sheet = wb.createSheet("Sheet1");
        XSSFRow row0 = sheet.createRow(0);
        row0.createCell(0).setCellValue("姓名");
        row0.createCell(1).setCellValue("年龄");
        // 写入Excel内容
        for (int i = 1; i < 10; i++) {
            XSSFRow row = sheet.createRow(i);
            row.createCell(0).setCellValue("张三" + i);
            row.createCell(1).setCellValue(20 + i);
        }
        // 输出Excel文件
        OutputStream os = response.getOutputStream();
        wb.write(os);
        os.flush();
        os.close();

    } catch (Exception e) {
        e.printStackTrace();
    }
}

三、前端实现

1. 在Vue项目中安装axios

在Vue项目中可以使用axios来调用后端接口，安装方法如下：

npm install axios

1. 编写前端导出Excel的代码

在Vue组件的methods中可以编写一个导出Excel的方法：

exportExcel() {
    axios({
        url: "/export", // 调用后端API接口
        method: "GET",
        responseType: "blob"
    }).then(response => {
        // 处理Excel文件，并进行下载
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" });
        let fileName = "导出数据.xlsx";
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName); // 兼容IE10及以上
        } else {
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.href = url;
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(url);
        }
    });
}

四、使用示例

可以在页面中添加一个按钮，在点击按钮时触发导出Excel的操作。示例代码如下：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    exportExcel() {
      axios({
        url: "/export",
        method: "GET",
        responseType: "blob"
      }).then(response => {
        let blob = new Blob([response.data], { type: "application/vnd.ms-excel" });
        let fileName = "导出数据.xlsx";
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          link.href = url;
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(url);
        }
      });
    }
  }
}
</script>

五、总结

通过以上步骤，我们可以实现基于Springboot和Vue.js的数据导出功能。在后端使用Apache POI来生成Excel文件，在前端使用axios来调用后端接口，并使用Blob来处理Excel文件。整个过程相对简单，适合入门级开发者学习和使用。