Java与Vue前端导出Excel表格文件并解决乱码和下载完后文件打不开情况

JAVA 后端

	org.apache.poi
	poi
	5.0.0




	org.apache.poi
	poi-ooxml
	5.0.0

后端实现 :

import org.apache.poi.hssf.util.HSSFColor;
import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;

/**
 * @author 江湖人称小程
 */
@RestController
@RequestMapping("export")
public class ExportExcelController {@GetMapping("data")
    public void exportData(HttpServletResponse response) {

        // 1. 创建工作空间
        Workbook workbook = new XSSFWorkbook(); // .xlsx 用 XSSFWorkbook
//        Workbook workbook = new HSSFWorkbook(); // .xls 用 HSSFWorkbook

        // 2. 创建工作表
        Sheet sheet = workbook.createSheet("学生信息");
        // 2.1 创建标题行（第一行）Row headerRow = sheet.createRow(0);


        /* 3. 定义一个字体（建议将定义字体这段代码，提取出来进行封装，后续可以定义各式各样的的字体）*/
        // 3.1 创建字体
        Font headerFont = workbook.createFont();
        // 3.2 14 号大小
        headerFont.setFontHeightInPoints((short) 14);
        // 3.3 黑色字体
        headerFont.setColor(HSSFColor.HSSFColorPredefined.BLACK.getIndex());
        // 3.4 宋体
        headerFont.setFontName("宋体");

        /* 4. 声明样式 CellStyle，并设置 */
        // 4.1 创建 style
        CellStyle style = workbook.createCellStyle();
        // 4.2 将字体设置进 style 对象中
        style.setFont(headerFont);
        // 4.3 水平和垂直居中
        style.setAlignment(HorizontalAlignment.CENTER);
        style.setVerticalAlignment(VerticalAlignment.CENTER);

        /* 设置列宽和表头样式 */
        String[] headers= {"姓名", "性别", "年龄", "班级" , "联系方式" , "家庭住址"};
        for (int i = 0; i  students = new ArrayList();
        students.add(new Student("小明", "男", 17, "三年二班", "1524215241", "牛牛村"));
        students.add(new Student("小红", "女", 16, "三年二班", "1524215241", "牛牛村"));
        students.add(new Student("小张", "女", 17, "三年二班", "1524215241", "牛牛村"));
        students.add(new Student("小李", "男", 18, "三年二班", "1524215241", "牛牛村"));
        students.add(new Student("小王", "nv", 16, "三年二班", "1524215241", "牛牛村"));

        /* 遍历 */
        for (int j = 0; j 

此时，后端的代码已全部实现，由于是 Get 请求，所以我们可以直接在浏览器访问 URL 进行下载：

前端实现:

type 类型 // 这里一定要和后端对应，不然可能出现乱码或者打不开文件

// 导出设备数据
function exportItem() {exportDeviceApi(searchParams).then(resolve => {const blob = new Blob([resolve], 
{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})  // 你需要的类型 转化为 blob 对象
        const url = window.URL.createObjectURL(blob)         // 将对象转化为链接
        let a = document.createElement('a')
        // 下载链接
        a.href = url
        a.download = '导出设备数据.xlsx'
        document.body.appendChild(a)
        // 点击 a 标签，进行下载 
        a.click()
        // 移除元素
        document.body.removeChild(a)
    })
}

对 exportDeviceApi 的封装：

// 导出设备数据 /device/export
export function exportDeviceApi(param) {
    return request({
        url: "/device/export",
        method: "post",
        data: param,
        responseType: 'blob',  // 设置响应数据类型为 blob。这句话很重要！！！})
}

问题

总结