SpringBoot + easyexcel + vue 下載 excel 問題

最近有個下載 excel 的需求，后端導出 excel 我選用了 easyexcel，但是 vue 前端老是下載不了，發現網上寫的很多普遍的方法用着不行。查了下發現了可行的方法，這里寫下總結。

1. 后端

不知為啥用 Post 請求下載不了，這里改成了 Get 請求

Param.java 請求參數對象

@Data
public class Param {

    private String aa;
    
    private String bb;
    
    private String cc;

}

Controller層

@GetMapping("/download")
public void download(HttpServletResponse response, Param param) throws IOException {
    // 這里注意 有同學反應使用swagger 會導致各種問題，請直接用瀏覽器或者用postman
    response.setContentType("application/vnd.ms-excel");
    response.setCharacterEncoding("utf-8");
    // 這里URLEncoder.encode可以防止中文亂碼 當然和easyexcel沒有關系
    String fileName = URLEncoder.encode("demo", "UTF-8");
    response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
    EasyExcel.write(response.getOutputStream(), DownloadData.class).sheet("模板").doWrite(data());
}

/**
* 測試數據
*/
private List<DownloadData> data() {
    List<DownloadData> list = new ArrayList<DownloadData>();
    for (int i = 0; i < 10; i++) {
        DownloadData data = new DownloadData();
        data.setString("字符串" + 0);
        data.setDate(new Date());
        data.setDoubleData(0.56);
        list.add(data);
    }
    return list;
}

DownloadData.java

/**
 * 基礎數據類
 *
 * @author Jiaju Zhuang
 **/
@Data
public class DownloadData {
    @ExcelProperty("字符串標題")
    private String string;
    @ExcelProperty("日期標題")
    private Date date;
    @ExcelProperty("數字標題")
    private Double doubleData;
}

2. 前端

manage.js

為下載返回 url

//數據導出
export function download(){
  return url+'/api/dataset/excel/download'
}

table.vue

// 引入download方法
import {download} from '@/api/manage'


// 下載按鈕
<a-button  icon="download" @click="downFile()">
  導出表格
</a-button>

下載方法

export default {		
		downloadExcel() {
      let url = download()
      const param = '?aa=' + this.aa + '&bb=' + this.bb + '&cc=' + this.cc
      //創建一個a標簽元素
      const a = document.createElement('a')
      //給a標簽設置鏈接屬性
      a.href = url + param
      //調用點擊事件
      a.click();
    }
}

3. 參考資料

springboot vue下載文件