快捷導(dǎo)航

vue實現(xiàn)zip文件下載

更新時間：2021年08月26日 17:12:15 作者：Explorer_S

這篇文章主要為大家詳細介紹了vue實現(xiàn)zip文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)zip文件下載的具體代碼，供大家參考，具體內(nèi)容如下

el-button按鈕

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

js處理說明

request 攔截器 request.js

axios 引入并創(chuàng)建 axios 實例，request 攔截器添加

import axios from 'axios'


// 創(chuàng)建axios實例
const service = axios.create({
  baseURL: '',    // api的baseURL
  timeout: 20000, // 請求超時時間
  params: {
 // 請求參數(shù)
  }
});

// request攔截器
service.interceptors.request.use(config => {
  // .... config 添加處理
  ......
  
  return config
}

export default service

request 攔截器在請求前處理，可以添加 http headers 設(shè)置，例如：

1、HTTP Request Headers： token、cookie、session等值添加處理（config.headers[‘后臺取值名稱'] = ‘相關(guān)值';）：

（1）config.headers[‘token'] = ‘token的值';
（2）config.headers[‘cookie'] = ‘cookie的值';
（3）config.headers[‘session'] = ‘session的值';

2、Headers post設(shè)置：如 Content-Type

上傳文件使用：config.headers.post[‘Content-Type'] = ‘multipart/form-data';

zip文件下載

1、request.js 代碼：

import axios from 'axios'


// 創(chuàng)建axios實例
const service = axios.create({
  baseURL: '',    // api的baseURL
  timeout: 20000, // 請求超時時間
  params: {
 // 請求參數(shù)
  }
});

// request攔截器
service.interceptors.request.use(config => {
  // config 添加 token 值
  config.headers['token'] = getToken();  // getToken()是我的獲取值方法，系統(tǒng)校驗使用
  return config
}

export default service

2、vue頁面引用 request.js

import request from '@/utils/request'

下載處理

// fileName下載設(shè)置名稱，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)
   })
},

后臺處理

根據(jù)請求 /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);
            //設(shè)置Http響應(yīng)頭告訴瀏覽器下載文件名 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;
        }
    }

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: