vue使用axios下载文件

方法一：直接在使用axios请求中处理

api文件：

import axios from 'axios'
// 下载文件
export const exportFile = (params: any) => {
  return axios({
    url: `/dow/${params.fileCategory}/${params.filePath}`,
    method: 'get',
    params,
    responseType: 'blob'
  }).then(res => {
    let blob = new Blob([res.data],{type: res.headers['content-type']});
    // 创建新的URL并指向File对象或者Blob对象的地址
    const blobURL = window.URL.createObjectURL(blob)
    // 创建a标签，用于跳转至下载链接
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    const contentDisposition = res.headers['content-disposition'] || `attachment;filename=${params.filePath}`;
    tempLink.setAttribute('download', decodeURI(contentDisposition.split(';')[1].split('=')[1]))
    // 兼容：某些浏览器不支持HTML5的download属性
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    // 挂载a标签
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    // 释放blob URL地址
    window.URL.revokeObjectURL(blobURL)
  });
}
export default {
  exportFile
}

调用的文件：

import common from '@/api/common'
// 下载文件
const download = (record) => {
  //fileCategory:文件夹名    filePath：文件路径
  common.exportFile({'fileCategory':'identify','filePath':record.filePath})
}

方法2：通过axios二次封装时处理

request文件：

import { App } from 'vue'
import storage from 'store'
import router from '@/router'
import { regAxios } from './install'
import { message } from 'ant-design-vue'
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
// 创建axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_REQUEST_BASE_URL as string,
  timeout: 6000
})
/**
 * @desc: 异常拦截处理器
 * @param { Object } error 错误信息
 */
const errorHandler = (error: AxiosError): AxiosError | Promise => {
  message.error(error.message)
  return Promise.reject(error)
}
/**
 * @desc: 请求发送前拦截
 * @param { Object } config 配置参数
 */
request.interceptors.request.use((config: AxiosRequestConfig): AxiosRequestConfig => {
  config.headers['token'] = storage.get('token') || ''
  return config
}, errorHandler)
/**
 * @desc: 服务端响应后拦截
 * @param { Object } response 返回的数据
 */
request.interceptors.response.use((response: AxiosResponse): AxiosResponse | Promise => {
  if (response.config.responseType === "blob") {
    let blob = new Blob([response.data],{type: response.headers['content-type']});
    // 创建新的URL并指向File对象或者Blob对象的地址
    const blobURL = window.URL.createObjectURL(blob)
    // 创建a标签，用于跳转至下载链接
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    const contentDisposition = response.headers['content-disposition'] || 'attachment;filename=Download';
    tempLink.setAttribute('download', decodeURI(contentDisposition.split(';')[1].split('=')[1]))
    // 兼容：某些浏览器不支持HTML5的download属性
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    // 挂载a标签
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    // 释放blob URL地址
    window.URL.revokeObjectURL(blobURL)
  } else if (response.data.code === 200 || response.data.error === false) {
    return response
  } else if (response.data.code === -401) {
    // 登录失效
    storage.remove('token')
    router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
    return Promise.reject(response)
  } else {
    return Promise.reject(response)
  }
}, errorHandler)
export const globalAxios = {
  install (app: App) {
    app.use(regAxios, request)
  }
}
export default request

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。