vue开发之导出功能前端

1. 创建request.js公共请求文件

import axios from 'axios'
import Qs from 'qs'

//	设置
axios.withCredentials = true;
axios.defaults.withCredentials = true;

//	或者这样设置
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;  //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 100000
})
export function download(url, params, filename) {
   return service.post(url, params, {transformRequest: [(params) => {
      return Qs.stringify(params)
    }],
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  }).then((data) => {
    const content = data
    const blob = new Blob([content])
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
  }).catch((r) => {
    console.error(r)
  })
}

2. main.js引入文件

import { download } from '@/utils/request'

3. 使用

/** 导出按钮操作 */
    handleExport() {
      this.download('/test/export', {
        ...this.queryParams
      }, `test_link.xlsx`)
    },