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 = ate({
baseURL: '',    // api的baseURL
timeout: 20000, // 请求超时时间
params: {
// 请求参数
}
});
// request
quest.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 = ate({
baseURL: '',    // api的baseURL
timeout: 20000, // 请求超时时间
params: {
// 请求参数
}
});
// request
quest.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 = ateObjectURL(new Blob([response]))
const link = ateElement('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 ller;
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.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 = ("fileLocation")+"";
try {
String filePath = "D:/file/" + fileLocation + ".zip";
//得到该⽂件
File file = new File(filePath);
if (!ists()) {
System.out.println("[⽂件下载]没有可下载的⽂件");
return;
}
FileInputStream fileInputStream = new FileInputStream(file);
//设置Http响应头告诉浏览器下载⽂件名 Filename
response.setHeader("Content-Disposition", "attachment;Filename=" + de(fileLocation+".zip", "UTF-8"));            OutputStream outputStream = OutputStream();
byte[] bytes = new byte[2048];
int len = 0;
while ((len = ad(bytes)) > 0) {
outputStream.write(bytes, 0, len);
}
fileInputStream.close();
outputStream.close();
} catch (Exception e) {
System.out.println("[⽂件下载]下载⽂件异常");
e.printStackTrace();
return;
}
session下载}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。