溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是如何實現Springboot vue導出功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
最近在工作遇到vue和Springboot 實現導出功能，翻看很多資料，發現一些博客寫法都過時了，所以自己特此記錄下，使用版本vue2,Springboot 2x以上,chrome瀏覽器 76.0.3809.100
vue 2寫法
let blob = new Blob([res.data], { type: 'application/octer-stream' });
其中我發現很多博客用這樣的寫法，但是我發現打印res的時候沒有發現data這個參數,總是報錯后面直接用res就好了。
正確寫法let blob = new Blob([res], { type: 'application/octer-stream' });
科普一下：axios中params和data兩者，以為他們是相同的，實則不然。 因為params是添加到url的請求字符串中的，而data是添加到請求體（body）中的，最好使用params參數
import axios from 'axios'
axios({
method: 'post',
url: '/user/excelExport',
responseType：‘blob',
params
}
).then(res => {
const link = document.createElement('a')
let blob = new Blob([res], { type: 'application/octer-stream' });
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
).catch(err => {
console.log(err)
}
);后臺代碼寫法 ——使用阿里巴巴的excel導出類easyexcel https://github.com/alibaba/easyexcel
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>{latestVersion}</version>
</dependency>//這里可以不用關閉流,流在方法結束，會自動關閉，通過配置product，指定返回頭
@PostMapping(path = "/user/excelExport", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public void excelExport(WithdrawListDto withdrawListDto, HttpServletResponse response) {
List<WithdrawListVo> list = withdrawService.list(withdrawListDto);
ExcelWriter writer = new ExcelWriter(response.getOutputStream(), ExcelTypeEnum.XLSX, true);
Sheet sheet1 = new Sheet(1, 0, WithdrawListVo.class);
sheet1.setSheetName("sheet1");
writer.write(list, sheet1);
}PostMapping，加上返回頭了。前端傳過來的context-Type 要加上multipart/form-data 類型，然后在前端傳過來的url進行拼接參數,就可以進行多參數，但是不建議參數太多
例子：如/user/excelImport?account=12731564&userName=李四
@PostMapping(path = "/user/excelImport")
public void excelImport(WithdrawListDto withdrawListDto,MultipartFile multipartFile) {
}看完這篇關于如何實現Springboot vue導出功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
