vue封装公用导出/下载

在实际项目中,有很多导出功能,每个页面都去写一次方法就比较麻烦,所以就写了个简单的通用的方法.

1.首先得创一个公用方法文件,这里我创在了src/utils/common.js(根据项目实际情况创建位置以及命名)

 2.在common.js 里面去写导出的公用方法

//公用方法，可通过this.$common.methodName进行调用
export default{
    //下载方法初步封装
    downloadFile(data,name){
       const link = document.createElement('a')
        let blob = new Blob([data])
        link.style.display='none'
        link.href=URL.createObjectURL(blob)
        //下载文件名
        link.download =name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }
}

3.在你需要导出的页面方法进行调用

//在需要这个接口的页面 引入
import {querUrl} from '@/api/home'

 //exportFile导出的点击事件 在接口请求成功后直接用this.$common.你封装方法的名字,去调用就可以了
     exportFile(){
        const param ={} //向后台传参参数
        querUrl(param,{responseType:'arraybuffer'}).then(res=>{
            //querUrl 是封装的接口
            //里面就是接口请求成功后写的方法了
            this.$common.downloadFile(res,'下载表格名字.csv') //表格名字可以自定义可以写死,文件格式根据后端返回需要什么格式就改成什么就可以了.我这里写的是csv
        })
      },

注意:

接口querUrl 

import{ get,post} from '@/utils/request'
//querUrl 自定义接口名称 需要的页面引用调入
export const querUrl = (param,config) =>{
    return get('服务器地址'+ '接口地址',param,null,config) //如果是导出,那这里的param,null,config 一定要配上格式,不然在你调用接口, responseType就传不过去. 如果导出不需要传参,直接把param 定义为{}就行了
}

  这里接口是根据自己项目去写的.我们是把接口地址单独拿出来一个页面写的

至于request.js文件,是我们封装的api文件 ,就是get,post这些请求的文件 ,简单的写了一下,可以参考一下,毕竟没有写太完整,token这些还没有添加进去 

import axios from 'axios'
import { reject, resolve } from 'core-js/fn/promise'

let instance =null
/**
 * 对请求进行封装，只有status与code 都是200 才会进入then,否则均进入catch
 */
const request =(options ={}) =>{
    instance(options).then(res =>{
        let {data ,status} = res
        //请求响应code 200 --成功 ，400 -- 参数错误， 401--鉴权失败， 500 -- 网络异常
        let responseCode = res.code ? res.code :responseCode
        if(state === 200){
            resolve(data)
        }else if(responseCode === '777'){
            //登陆失效 返回登录页
        }else{
            reject(data.respomseMsg)
        }
    }).catch(result =>{
        if(!result || !result.response){
            reject(result)
        }
    })
}
const get = (url,params ={} , show,config ={})=>{
    return request({
        url,
        method:'get',
        params,
        show:show,
        ...config,
    })
}
const post = (url,params ={} , show,config ={})=>{
    return request({
        url,
        method:'get',
        params,
        show:show,
        ...config,
    })
}

/**
 * request 对请求进行二次封装，处理异常编号
 * axios 对axis进行包装之后的原生实例
 */
export{
    request,
    get,
    post,
    instance as axios,
}
export default instance