【vue】zip下载

1.前端

<template>
	<el-button size="medium" @click="handleDownload()">
	  下载
	</el-button>    
</template>

<script>
import { downloadZip} from './api'
export default{
  name: 'test',

  data() {
    return {
      
    }
  },
  methods: {
    handleDownload(){
      downloadZip().then((res)=>{
        // if(res.data.success){
        //   this.$message.success("下载成功")
        // }
        this.download(res)
      }).catch((error)=>{
        this.$message.error("下载失败")
      });
    },
    download(res){
        const content = res.data;
        const blob = new Blob([content], { type: 'application/zip'});
        const fileName = "压缩包.zip";
        if ('download' in document.createElement('a')) { // 非IE下载
            var link = document.createElement('a');
            link.download = fileName;
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href); // 释放URL 对象
            document.body.removeChild(link);
        } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    }
  },
 
};
</script>

2.api

import connect from './connect.js'
export const URL_PREFIX = '/test'

export const backUpRequest = (params) =>{
  return connect.get(`${URL_PREFIX}/download/download`, { params }, {}, 'blob')
}

3.connect.js

import service from './service.js'

const connect = {
  /**
   * get请求
   */
  get: (url, params, headers, responseType) => {
    return new Promise((resolve, reject) => {
      service.get(url, { ...params, headers, responseType }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },
  /**
   * post请求
   */
  post: (url, data, params, headers) => {
    return new Promise((resolve, reject) => {
      service.post(url, { ...data, ...params, headers }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },
  /**
   * delete请求
   */
  delete: (url, data, params, headers) => {
    return new Promise((resolve, reject) => {
      service.delete(url, { ...data, ...params, headers }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },
  /**
   * put请求
   */
  put: (url, data, params, headers) => {
    return new Promise((resolve, reject) => {
      service.put(url, { ...data, ...params, headers }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  }
}
export default connect

4.service.js

import { extend } from 'umi-request'

const codeMessage = {
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '403:用户得到授权，但是访问是被禁止的。',
  404: '404:发出的请求针对的是不存在的记录，服务器没有进行操作。',
  405: '405:方法不被允许',
  406: '406:请求的格式不可得。',
  410: '410:请求的资源被永久删除，且不会再得到的。',
  422: '422:当创建一个对象时，发生一个验证错误。',
  500: '500:服务器发生错误，请检查服务器。',
  502: '502:网关错误。',
  503: '503:服务不可用，服务器暂时过载或维护。',
  504: '当前服务器繁忙，请稍后再试'
}

/**
 * 异常处理程序
 */
const errorHandler = async (error) => {
  let errortext = ''
  if (error && error.status) {
    errortext = codeMessage[error.status]
  } else {
    errortext = 'error'
  }
  console.error(errortext)
  return Promise.reject(error)
}

/**
 * 配置request请求时的默认参数
 */
const service = extend({
  errorHandler // 默认错误处理
})

service.interceptors.request.use((url, options) => {
  const token = sessionStorage.getItem('token')
  // 为每一个请求添加时间戳，防止浏览器缓存
  options.params = {
    ...options.params,
    _t: Date.parse(new Date())
  }
  if (token) {
    const headers = { ...options.headers, Authorization: token }
    return (
      {
        url: `${url}`,
        options: { ...options, headers: headers, getResponse: true }
      }
    )
  } else {
    return (
      {
        url: `${url}`,
        options: { ...options, getResponse: true }
      }
    )
  }
})

// response拦截器, 处理response
service.interceptors.response.use((response) => {
  //const token = response.headers.get('Authorization')
  //if (token) {
    //sessionStorage.setItem('token', token)
  //}
  response = response && response.data ? response.data : response
  return response
})

export default service

5.后端

    @RequestMapping(value = "/download", method = RequestMethod.GET)
    @ApiOperationSupport(order = 5)
    @ApiOperation(value = "导出", notes = "导出")
    public ResponseEntity<byte[]> exportImageText(@RequestParam Map<String, Object> params) {
        File zipFile = new File("D:\\测试.zip");

        byte[] bytes = null;
        try {
            bytes = FileUtils.readFileToByteArray(zipFile);
        } catch (Exception e1) {
			log.error(e1.getMessage());
		}finally {
            if(zipFile.exists()){
                zipFile.delete();
            }
        }
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        headers.setContentDispositionFormData("attachment",currentTime+".zip");
        return new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK);
    }