本文实例为大家分享了Vue实现zip文件下载的具体代码,供大家参考,具体内容如下 el-button按钮 <el-button size="mini" type="succ
本文实例为大家分享了Vue实现zip文件下载的具体代码,供大家参考,具体内容如下
el-button按钮
<el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)">下载</el-button>
js处理说明
request 拦截器 request.js
axiOS 引入并创建 axios 实例,request 拦截器添加
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: '', // api的baseURL
timeout: 20000, // 请求超时时间
params: {
// 请求参数
}
});
// request拦截器
service.interceptors.request.use(config => {
// .... config 添加处理
......
return config
}
export default service
request 拦截器在请求前处理,可以添加 Http headers 设置,例如:
1、HTTP Request Headers: token、cookie、session等值添加处理(config.headers[‘后台取值名称'] = ‘相关值';):
(1)config.headers[‘token'] = ‘token的值';
(2)config.headers[‘cookie'] = ‘cookie的值';
(3)config.headers[‘session'] = ‘session的值';
2、Headers post设置:如 Content-Type
上传文件使用:config.headers.post[‘Content-Type'] = ‘multipart/fORM-data';
1、request.js 代码:
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: '', // api的baseURL
timeout: 20000, // 请求超时时间
params: {
// 请求参数
}
});
// request拦截器
service.interceptors.request.use(config => {
// config 添加 token 值
config.headers['token'] = getToken(); // getToken()是我的获取值方法,系统校验使用
return config
}
export default service
2、vue页面引用 request.js
import request from '@/utils/request'
下载处理
// fileName下载设置名称,fileLocation文件存储名称
downloadHandle(fileName,fileLocation) {
let prome = {
fileLocation: fileLocation
}
request.post(
'/api/downloadFile',
prome,
{
responseType: 'blob',
timeout: 60000
}
).then(response => {
if (!response.size) {
this.$message({
message: '没有可下载文件',
type: 'warning'
})
return
}
const url = window.URL.createObjectURL(new Blob([response]))
const link = window.document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName+'.zip')
document.body.appendChild(link)
link.click()
}).catch((data) => {
console.log(data)
})
},
后台处理
根据请求 /api/downloadFile 后台 Java API 处理
package com.WEB.controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.httpservletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.Map;
@RestController
@RequestMapping("/api")
public class DownloadFileDemo {
@RequestMapping(value = "/downloadFile")
public void downloadFile(@RequestBody Map<String, Object> tranNap, HttpServletRequest request, HttpServletResponse response) {
String fileLocation = tranNap.get("fileLocation")+"";
try {
String filePath = "D:/file/" + fileLocation + ".zip";
//得到该文件
File file = new File(filePath);
if (!file.exists()) {
System.out.println("[文件下载]没有可下载的文件");
return;
}
FileInputStream fileInputStream = new FileInputStream(file);
//设置Http响应头告诉浏览器下载文件名 Filename
response.setHeader("Content-Disposition", "attachment;Filename=" + URLEncoder.encode(fileLocation+".zip", "UTF-8"));
OutputStream outputStream = response.getOutputStream();
byte[] bytes = new byte[2048];
int len = 0;
while ((len = fileInputStream.read(bytes)) > 0) {
outputStream.write(bytes, 0, len);
}
fileInputStream.close();
outputStream.close();
} catch (Exception e) {
System.out.println("[文件下载]下载文件异常");
e.printStackTrace();
return;
}
}
}
--结束END--
本文标题: vue实现zip文件下载
本文链接: https://lsjlt.com/news/133622.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0