Springboot vue導(dǎo)出功能實(shí)現(xiàn)代碼
最近在工作遇到vue和Springboot 實(shí)現(xiàn)導(dǎo)出功能，翻看很多資料，發(fā)現(xiàn)一些博客寫法都過時了，所以自己特此記錄下，使用版本vue2,Springboot 2x以上,chrome瀏覽器 76.0.3809.100
vue 2寫法
let blob = new Blob([res.data], { type: 'application/octer-stream' });
其中我發(fā)現(xiàn)很多博客用這樣的寫法，但是我發(fā)現(xiàn)打印res的時候沒有發(fā)現(xiàn)data這個參數(shù),總是報(bào)錯后面直接用res就好了。
正確寫法let blob = new Blob([res], { type: 'application/octer-stream' });
科普一下：axios中params和data兩者，以為他們是相同的，實(shí)則不然。 因?yàn)閜arams是添加到url的請求字符串中的，而data是添加到請求體（body）中的，最好使用params參數(shù)
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導(dǎo)出類easyexcel https://github.com/alibaba/easyexcel
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>{latestVersion}</version>
</dependency>
//這里可以不用關(guān)閉流,流在方法結(jié)束，會自動關(guān)閉，通過配置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進(jìn)行拼接參數(shù),就可以進(jìn)行多參數(shù)，但是不建議參數(shù)太多
例子：如/user/excelImport?account=12731564&userName=李四
@PostMapping(path = "/user/excelImport")
public void excelImport(WithdrawListDto withdrawListDto,MultipartFile multipartFile) {
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文介紹了“java中的值傳遞和引用傳遞的區(qū)別分析”，需要的朋友可以參考一下2013-03-03
這篇文章主要幫助大家全面解析Java觀察者模式，了解java設(shè)計(jì)模式中的觀察者模式，感興趣的小伙伴們可以參考一下2016-09-09
本文介紹了Java動態(tài)腳本Groovy，Groovy是用于Java虛擬機(jī)的一種敏捷的動態(tài)語言，它是一種成熟的面向?qū)ο缶幊陶Z言，既可以用于面向?qū)ο缶幊?，又可以用作純粹的腳本語言。使用該種語言不必編寫過多的代碼，同時又具有閉包和動態(tài)語言中的其他特性,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了JAVA使用ffmepg處理視頻的方法，包括視頻壓縮分片合并功能，通過實(shí)例代碼講解的很詳細(xì)，對java ffmepg處理視頻相關(guān)知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了idea提交文件時如何忽略某些文件的提交問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了詳解Mybatis是如何解析配置文件的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要介紹了Java中Map的遍歷方法及性能測試,本文講解對HashMap、TreeMap進(jìn)行對比測試,給出測試代碼、測試結(jié)果和測試結(jié)論,需要的朋友可以參考下2015-01-01
java 使用ElasticSearch完成百萬級數(shù)據(jù)查詢附近的人功能
本篇文章主要介紹了java 使用ElasticSearch完成百萬級數(shù)據(jù)查詢附近的人功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關(guān)于Java生成二維碼的2種實(shí)現(xiàn)方法,二維碼的實(shí)質(zhì)就是一個鏈接地址,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Spring的自動裝配常用注解詳解,自動裝配就是指 Spring 容器在不使用 <constructor-arg> 和<property> 標(biāo)簽的情況下，可以自動裝配相互協(xié)作的 Bean 之間的關(guān)聯(lián)關(guān)系，將一個 Bean 注入其他 Bean 的 Property 中,需要的朋友可以參考下2023-08-08