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