vue Realizes zip File Download

This article example for everyone to share vue implementation of zip file download code, for your reference, the specific content is as follows

el-button Button

<el-button size="mini" type="success" @click="downloadHandle(fileName, fileLocation)"> Download </el-button>

js Handling Instructions

request Interceptor request. js

axios introduces and creates an axios instance, and request interceptor adds

import axios from 'axios'


//  Create axios Instances 
const service = axios.create({
  baseURL: '',    // api Adj. baseURL
  timeout: 20000, //  Request timeout 
  params: {
 //  Request parameter 
  }
});

// request Interceptor 
service.interceptors.request.use(config => {
  // .... config  Add processing 
  ......
  
  return config
}

export default service

The request interceptor processes before the request, and you can add http headers settings, such as:

1. HTTP Request Headers: token, cookie, session equivalent addition processing (config. headers ['Background Value Name'] = 'Related Value';):

(1) config. headers ['token'] = the value of 'token';
(2) config. headers ['cookie'] = the value of 'cookie';
(3) config. headers ['session'] = the value of 'session';

2. Headers post settings: such as Content-Type

Upload file using: config. headers. post ['Content-Type'] = 'multipart/form-data';

zip File Download

1. request. js code:

import axios from 'axios'


//  Create axios Instances 
const service = axios.create({
  baseURL: '',    // api Adj. baseURL
  timeout: 20000, //  Request timeout 
  params: {
 //  Request parameter 
  }
});

// request Interceptor 
service.interceptors.request.use(config => {
  // config  Add  token  Value 
  config.headers['token'] = getToken();  // getToken() Is my method of getting values, and the system verifies using 
  return config
}

export default service

2. The vue page references request. js

import request from '@/utils/request'

Download processing

// fileName Download the setting name, fileLocation File store name 
downloadHandle(fileName,fileLocation) {
   let prome = {
     fileLocation: fileLocation
   }
   request.post(
    '/api/downloadFile', 
    prome, 
    {
      responseType: 'blob',
      timeout: 60000
    }
   ).then(response => {
     if (!response.size) {
       this.$message({
         message: ' There are no downloadable files ',
         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)
   })
},

Background processing

According to the request/api/downloadFile background Java API processing

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 {

    /**
     *  File download 
     * @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";
            // Get the file 
            File file = new File(filePath);
            if (!file.exists()) {
                System.out.println("[ File download ] There are no files to download ");
                return;
            }
            FileInputStream fileInputStream = new FileInputStream(file);
            // Settings Http The response header tells the browser to download the file name  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("[ File download ] Download file exception ");
            e.printStackTrace();
            return;
        }
    }

}