vue zip文件下载请求封装与使用

axios封装(重点是响应拦截)
这里把响应超时时间注释是文件下载接口返回需要较长时间

import axios from 'axios'
import {ElMessageBox} from "element-plus";
import router from "@/router";

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    // timeout: 10000
})
// console.log(process.env.VUE_APP_BASE_API)
// 请求拦截器
service.interceptors.request.use(
    config => {
        // 添加请求头等前置处理
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')

        return config
    },
    error => {
        // 请求错误处理
        console.log('Request Error:', error)
        // return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 响应后处理
        // 二进制数据则直接返回
        if (response.request.responseType === 'blob') {
            return response.data
        }
        if (response.status === 200 && response.data.code === 200) {
            return Promise.resolve(response.data)
        } else {
            if(response.data.code === 401){
                localStorage.removeItem('token')
                ElMessageBox.alert("登录状态已过期,请重新登录", '提示', {
                    confirmButtonText: '去登录',
                    callback: () => {
                        router.replace("/login").then(r => {})
                     }
                }).then(r =>{})
            }
            // return Promise.reject(response.data)
        }
    },
    error => {
        console.log('Response Error:', error)
        // return Promise.reject(error)
    }
)

export default service

接口:

export function getZip(params){
    return request({
        url:"/exportZip",
        method:"get",
        params:params,
        responseType:"blob"
    })
}

页面:
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }

function exportEvaluation(){
  if(evaluationId.value!==null){
    const  loading = ElLoading.service({
      lock: true,
      text: '报告导出中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    getEvaluationZip({id:evaluationId.value}).then(res=>{
      console.log(res)
      if(res){
        let filename = year.value+'评价报告导出'
        const blob = new Blob([res],{  type: 'application/zip' })
        let objectUrl = URL.createObjectURL(blob) // 创建URL
        let link = document.createElement("a");
        link.href = objectUrl
        link.download =filename // 自定义文件名
        link.click() // 下载文件
        URL.revokeObjectURL(objectUrl); // 释放内存
        loading.close()
      }
    })
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue下载文件并携带请求头可以通过创建一个下载链接,并将请求头信息添加到该链接的请求头中来实现。 首先,在Vue组件中,需要定义一个方法来处理文件下载请求。在该方法中,可以使用axios库发起请求,并将请求头信息作为配置参数传递给axios。 示例代码如下: ```javascript import axios from 'axios'; export default { methods: { downloadFile() { // 请求头信息 const headers = { // 添加自定义请求头 'Authorization': 'Bearer your_token' }; // 发起下载请求 axios({ method: 'get', url: 'your_download_url', responseType: 'blob', // 设置响应类型为blob headers: headers // 添加请求头 }).then((response) => { // 创建下载链接 const url = window.URL.createObjectURL(new Blob([response.data])); // 创建a标签 const link = document.createElement('a'); link.href = url; // 设置文件名 link.setAttribute('download', 'your_file_name'); // 添加到页面,模拟点击下载 document.body.appendChild(link); link.click(); // 清理创建的对象 window.URL.revokeObjectURL(url); document.body.removeChild(link); }); } } } ``` 在上述代码中,你需要将`your_token`替换为你的实际请求头信息,`your_download_url`替换为你的文件下载链接,`your_file_name`替换为文件下载的名称。 这样,当调用`downloadFile`方法时,会发送带有请求头的文件下载请求,并在成功获取响应后,创建下载链接,模拟点击下载文件。 需要注意的是,由于涉及到文件下载,需要将响应类型设置为`blob`,并通过`URL.createObjectURL`方法创建下载链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值