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; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)