前端导出文件详细方法_前端get请求 导出文件

简介：前端实现文件的导出下载功能
说明：有get和post两种方式导出

使用get方法，适用于接口请求数据较少的情况。
使用post方法，适用于请求接口数据较多的情况。

一、get方法

// get方法导出文件
downLoad(url, address) {
  let baseURL = '' // 域名ip
  if (process.env.NODE_ENV === 'production') {
    baseURL = window.location.origin  // 你的生产环境地址
  }else{
    baseURL= 'http://localhost:8080/' // 你的测试环境地址
  }
  const address = '/export' // 你的接口地址
  const token = sessionStorage.getItem('token ') // token
  let parmas = '' // 请求参数
  const url= baseURL + address + token + parmas
  window.open(url)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、post方法

import axios from 'axios'
import moment from 'moment'
export function downloadExcel (data) {
  let baseURL = '' // 域名ip
  if (process.env.NODE_ENV === 'production') {
    baseURL = window.location.origin // 你的生产环境地址
  } else {
    baseURL = 'http://localhost:8080/' // 你的测试环境地址
  }
  let token = sessionStorage.getItem('token ') // token
  const address = '/export' // 你的接口地址
  const params = {
    method: 'post',
    url: baseURL + address, // 接口地址
    headers: { 'token': token },
    data: data, // 所需参数
    responseType: 'blob'
  }
  const newDate = moment().format('YYYY-MM-DD HH:mm:ss') // 获取当前时间
  axios(params).then(res => {
    // 可以更改导出文件格式
    const blob = new Blob([res.data], { type: res.headers['application/vnd.ms-excel'] }) // 此处下载的excel，可自行替换
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    // 下载文件的名称及文件类型后缀
    link.download = '下载名称' + '_' + newDate + '.xlsx'
    document.body.appendChild(link)
    link.click()
    // 在资源下载完成后 清除 占用的缓存资源
    window.URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33