1.前端
< template>
< el- button size= "medium" @click= "handleDownload()" >
下载
< / el- button>
< / template>
< script>
import { downloadZip} from './api'
export default {
name: 'test' ,
data ( ) {
return {
}
} ,
methods: {
handleDownload ( ) {
downloadZip ( ) . then ( ( res ) => {
this . download ( res)
} ) . catch ( ( error ) => {
this . $message. error ( "下载失败" )
} ) ;
} ,
download ( res ) {
const content = res. data;
const blob = new Blob ( [ content] , { type: 'application/zip' } ) ;
const fileName = "压缩包.zip" ;
if ( 'download' in document. createElement ( 'a' ) ) {
var link = document. createElement ( 'a' ) ;
link. download = fileName;
link. style. display = 'none' ;
link. href = URL . createObjectURL ( blob) ;
document. body. appendChild ( link) ;
link. click ( ) ;
URL . revokeObjectURL ( link. href) ;
document. body. removeChild ( link) ;
} else {
navigator. msSaveBlob ( blob, fileName) ;
}
}
} ,
} ;
< / script>
2.api
import connect from './connect.js'
export const URL_PREFIX = '/test'
export const backUpRequest = ( params ) => {
return connect. get ( ` ${ URL_PREFIX } /download/download ` , { params } , { } , 'blob' )
}
3.connect.js
import service from './service.js'
const connect = {
get : ( url, params, headers, responseType ) => {
return new Promise ( ( resolve, reject ) => {
service. get ( url, { ... params, headers, responseType } ) . then ( res => {
resolve ( res)
} ) . catch ( err => {
reject ( err)
} )
} )
} ,
post : ( url, data, params, headers ) => {
return new Promise ( ( resolve, reject ) => {
service. post ( url, { ... data, ... params, headers } ) . then ( res => {
resolve ( res)
} ) . catch ( err => {
reject ( err)
} )
} )
} ,
delete : ( url, data, params, headers ) => {
return new Promise ( ( resolve, reject ) => {
service. delete ( url, { ... data, ... params, headers } ) . then ( res => {
resolve ( res)
} ) . catch ( err => {
reject ( err)
} )
} )
} ,
put : ( url, data, params, headers ) => {
return new Promise ( ( resolve, reject ) => {
service. put ( url, { ... data, ... params, headers } ) . then ( res => {
resolve ( res)
} ) . catch ( err => {
reject ( err)
} )
} )
}
}
export default connect
4.service.js
import { extend } from 'umi-request'
const codeMessage = {
400 : '发出的请求有错误,服务器没有进行新建或修改数据的操作。' ,
401 : '用户没有权限(令牌、用户名、密码错误)。' ,
403 : '403:用户得到授权,但是访问是被禁止的。' ,
404 : '404:发出的请求针对的是不存在的记录,服务器没有进行操作。' ,
405 : '405:方法不被允许' ,
406 : '406:请求的格式不可得。' ,
410 : '410:请求的资源被永久删除,且不会再得到的。' ,
422 : '422:当创建一个对象时,发生一个验证错误。' ,
500 : '500:服务器发生错误,请检查服务器。' ,
502 : '502:网关错误。' ,
503 : '503:服务不可用,服务器暂时过载或维护。' ,
504 : '当前服务器繁忙,请稍后再试'
}
const errorHandler = async ( error ) => {
let errortext = ''
if ( error && error. status) {
errortext = codeMessage[ error. status]
} else {
errortext = 'error'
}
console. error ( errortext)
return Promise. reject ( error)
}
const service = extend ( {
errorHandler
} )
service. interceptors. request. use ( ( url, options ) => {
const token = sessionStorage. getItem ( 'token' )
options. params = {
... options. params,
_t: Date. parse ( new Date ( ) )
}
if ( token) {
const headers = { ... options. headers, Authorization: token }
return (
{
url: ` ${ url} ` ,
options: { ... options, headers: headers, getResponse: true }
}
)
} else {
return (
{
url: ` ${ url} ` ,
options: { ... options, getResponse: true }
}
)
}
} )
service. interceptors. response. use ( ( response ) => {
response = response && response. data ? response. data : response
return response
} )
export default service
5.后端
@RequestMapping ( value = "/download" , method = RequestMethod. GET )
@ApiOperationSupport ( order = 5 )
@ApiOperation ( value = "导出" , notes = "导出" )
public ResponseEntity< byte[ ] > exportImageText ( @RequestParam Map< String, Object> params ) {
File zipFile = new File ( "D:\\测试.zip" ) ;
byte[ ] bytes = null ;
try {
bytes = FileUtils. readFileToByteArray ( zipFile) ;
} catch ( Exception e1) {
log. error ( e1. getMessage ( ) ) ;
} finally {
if ( zipFile. exists ( ) ) {
zipFile. delete ( ) ;
}
}
HttpHeaders headers = new HttpHeaders ( ) ;
headers. setContentType ( MediaType. APPLICATION_OCTET_STREAM ) ;
headers. setContentDispositionFormData ( "attachment" , currentTime+ ".zip" ) ;
return new ResponseEntity < byte[ ] > ( bytes, headers, HttpStatus. OK ) ;
}