vue 通用下载方法封装

最新推荐文章于 2025-03-25 20:25:06 发布

三155

最新推荐文章于 2025-03-25 20:25:06 发布

阅读量560

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Beloved_Jodie/article/details/125369831

版权

这篇博客介绍了如何在Vue项目中封装一个通用的文件下载方法，利用axios、file-saver和xlsx库实现Excel文件的下载。文章详细展示了下载方法的实现过程，包括axios的配置、请求和响应拦截器的设置，以及错误处理。同时，还提供了errorCode.js和startel.js两个辅助工具函数的代码。最后，展示了在main.js中全局注册和组件中调用下载方法的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 通用下载方法封装

安装xlsx和file-saver

npm install file-saver xlsx --save

通用下载方法 request.js文件

// 在axios 二次封装文件下  封装通用下载方法
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import { saveAs } from 'file-saver'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/startel";

let downloadLoadingInstance;

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
})
// 响应拦截器
service.interceptors.response.use(res => {
})

// 通用下载方法
export function download(url, params, filename) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob'
  }).then(async (data) => {
    const isLogin = await blobValidate(data);
    if (isLogin) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

export default service

errorCode.js文件

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

startel.js文件

/**
 * 通用js方法封装处理
 * Copyright (c) 2019 startel
 */
/**
* 参数处理
* @param {*} params  参数
*/
export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

// 验证是否为blob格式
export async function blobValidate(data) {
  try {
    const text = await data.text();
    JSON.parse(text);
    return false;
  } catch (error) {
    return true;
  }
}

main.js

import { download } from '@/utils/request'
// 全局方法挂载
Vue.prototype.download = download

使用

    // 导出数据
    exportExcel() {
      this.download('/exportTableInfo', {
        ...this.params
      }, `Excel.xlsx`)
    },