vue实现zip文件下载

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文实例为大家分享了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;
        }
    }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。