| 本文实例为大家分享了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 servicerequest 拦截器在请求前处理，可以添加 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 service2、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; } }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Echarts Bar横向柱状图实例代码
Vue 详解mixins混入用法大全 |
