前后端分离 设计数据导出

前后端分离的设计中，数据导出通常由后端负责提供接口，前端调用接口获取数据，并将其导出为特定格式的文件。

以下是一个简单的示例：

1. 后端提供一个 API 接口，例如 /api/export，接收导出数据的请求，并返回导出的数据。

2. 前端调用该接口，例如使用 axios 库：

axios.get('/api/export').then(response => {
  // 处理导出的数据
})

3. 后端返回导出的数据，可以是一个 JSON 对象或其他格式，例如 CSV、Excel 等。

4. 前端使用 JavaScript 库，例如 FileSaver.js，将数据保存为特定格式的文件：

import { saveAs } from 'file-saver'

axios.get('/api/export').then(response => {
  const data = response.data
  const blob = new Blob([data], { type: 'text/csv;charset=utf-8' })
  saveAs(blob, 'export.csv')
})

以上代码示例以导出 CSV 文件为例，具体实现方式可以根据需求进行调整。

相关问题

SpringBoot前后端分离项目Excel导出数据的代码实现

下面是SpringBoot前后端分离项目Excel导出数据的代码实现步骤：

1. 引入poi包

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

<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>

2. 编写Excel导出工具类

创建ExcelUtil.java文件，编写Excel导出工具类，具体代码如下：

public class ExcelUtil {
    /**
     * 导出excel
     * @param response
     * @param fileName 文件名
     * @param headers 表头
     * @param dataList 数据
     */
    public static void exportExcel(HttpServletResponse response, String fileName, String[] headers, List<List<String>> dataList) {
        // 创建工作簿
        XSSFWorkbook workbook = new XSSFWorkbook();
        // 创建表格
        XSSFSheet sheet = workbook.createSheet();
        // 设置列宽
        for (int i = 0; i < headers.length; i++) {
            sheet.setColumnWidth(i, 20 * 256);
        }
        // 创建表头行
        XSSFRow row = sheet.createRow(0);
        // 设置表头
        for (int i = 0; i < headers.length; i++) {
            XSSFCell cell = row.createCell(i);
            cell.setCellValue(headers[i]);
        }
        // 添加数据
        for (int i = 0; i < dataList.size(); i++) {
            XSSFRow dataRow = sheet.createRow(i + 1);
            List<String> rowData = dataList.get(i);
            for (int j = 0; j < rowData.size(); j++) {
                XSSFCell cell = dataRow.createCell(j);
                cell.setCellValue(rowData.get(j));
            }
        }
        // 设置响应头
        response.setContentType("application/octet-stream");
        try {
            fileName = URLEncoder.encode(fileName, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
        // 输出Excel文件
        try {
            workbook.write(response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

3. 调用Excel导出工具类

在Controller中调用Excel导出工具类，具体代码如下：

@Controller
public class ExcelController {
    @RequestMapping("/export")
    public void export(HttpServletResponse response) {
        // 文件名
        String fileName = "测试导出.xlsx";
        // 表头
        String[] headers = {"姓名", "年龄", "性别"};
        // 数据
        List<List<String>> dataList = new ArrayList<>();
        dataList.add(Arrays.asList("张三", "23", "男"));
        dataList.add(Arrays.asList("李四", "25", "女"));
        dataList.add(Arrays.asList("王五", "28", "男"));
        // 调用Excel导出工具类
        ExcelUtil.exportExcel(response, fileName, headers, dataList);
    }
}

4. 配置跨域访问

由于是前后端分离项目，需要配置跨域访问，具体代码如下：

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

以上就是SpringBoot前后端分离项目Excel导出数据的代码实现步骤。

SpringBoot前后端分离项目Excel导出数据库数据的代码实现

在SpringBoot前后端分离的项目中，我们可以使用Apache POI库来实现Excel导出功能，具体步骤如下：

1. 添加Apache POI依赖

在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>

2. 编写导出Excel的Controller

在Controller中编写导出Excel的接口，如下所示：

@RestController
@RequestMapping("/export")
public class ExportController {

    @Autowired
    private UserService userService;

    @GetMapping("/user")
    public void exportUser(HttpServletResponse response) throws IOException {
        // 查询需要导出的数据
        List<User> userList = userService.getAllUsers();

        // 创建工作簿
        Workbook workbook = new XSSFWorkbook();
        Sheet sheet = workbook.createSheet("用户信息");

        // 创建表头
        Row headerRow = sheet.createRow(0);
        headerRow.createCell(0).setCellValue("ID");
        headerRow.createCell(1).setCellValue("姓名");
        headerRow.createCell(2).setCellValue("性别");
        headerRow.createCell(3).setCellValue("年龄");

        // 填充数据
        int rowNum = 1;
        for (User user : userList) {
            Row row = sheet.createRow(rowNum++);
            row.createCell(0).setCellValue(user.getId());
            row.createCell(1).setCellValue(user.getName());
            row.createCell(2).setCellValue(user.getGender());
            row.createCell(3).setCellValue(user.getAge());
        }

        // 设置响应头
        response.setContentType("application/vnd.ms-excel");
        response.setHeader("Content-disposition", "attachment;filename=user.xlsx");

        // 输出Excel文件
        OutputStream outputStream = response.getOutputStream();
        workbook.write(outputStream);
        outputStream.flush();
        outputStream.close();
    }
}

3. 测试导出Excel功能

启动SpringBoot项目，访问http://localhost:8080/export/user即可下载导出的Excel文件。

以上就是在SpringBoot前后端分离项目中实现Excel导出功能的代码实现。