vue实现zip文件下载
作者：Explorer_S
这篇文章主要为大家详细介绍了vue实现zip文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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';
zip文件下载
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 {
/**
* 文件下载
* @param tranNap
* @param request
* @param response
*/
@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;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。