Vue 前端导出后端返回的excel文件方式

    const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder'
    console.log(this.form)
    let param = new URLSearchParams();
    param.append("startDate", "2019-01-01");
    param.append("endDate", "2019-02-01");
    this.$axios.post(apiUrl, param,{responseType: 'blob'}).then((res) => {
        console.log( res.data)
        const link = document.createElement('a')
        let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob);
        let num = ''
        for(let i=0;i < 10;i++){
            num += Math.ceil(Math.random() * 10)
        }
        link.setAttribute('download', '外卖统计_' + num + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    })

// 设置返回类型为excel
response.setContentType("application/vnd.ms-excel; charset=UTF-8");  
// 设置返回文件名为filename.xls 
response.setHeader("Content-Disposition", "filename.xls"); 
// 请求或响应消息不能走缓存
response.setHeader("Cache-Control", "no-cache");
// 将Content-Disposition暴露出去，这样就可以用过JS获取到了
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { AUTHOR_KEY } from '@/global'
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://127.0.0.1:9999'
  withCredentials: true,
  timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    config.headers[AUTHOR_KEY] = getToken()
    return config
  },
  error => console.log(error)
)
// 响应拦截器
service.interceptors.response.use(
  response => {
    if (response.config.responseType === 'blob') {
      return response
    }
    return response.data
  },
  error => console.log(error)
)
export default service

const mimeMap = {
  xlsx: 'application/vnd.ms-excel',
  zip: 'application/zip',
}
export const toExcel = params => {
  return request({
    method: 'get',
    url: '/dayReportToExcel/toExcel',
    responseType: 'blob',
    params
  }).then(res => resolveBlob(res, mimeMap.xlsx))
export function resolveBlob(res, mimeType) {
  // 创建a标签，并处理二级制数据
  const aLink = document.createElement('a')
  const blob = new Blob([res.data], { type: mimeType })
  // 生成下载链接
  const URL = window.URL || window.webkitURL
  aLink.href = URL.createObjectURL(blob)
  // 设置下载文件名称
  let fileName = ''
  if (res.headers['content-disposition']) fileName = res.headers['content-disposition']
  if (res.headers['Content-Disposition']) fileName = res.headers['Content-Disposition']
  aLink.setAttribute('download', fileName)
  // 下载
  document.body.appendChild(aLink)
  aLink.click()
  // 释放URL对象
  window.URL.revokeObjectURL(aLink.href)
  document.body.removeChild(aLink)
}

export function resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  const blob = new Blob([res.data], { type: mimeType })
  const pat = new RegExp('filename=([^;]+\\.[^\\.;]+)')
  let contentDisposition
  if (res.headers['content-disposition']) contentDisposition = res.headers['content-disposition']
  if (res.headers['Content-Disposition']) contentDisposition = res.headers['Content-Disposition']
  const result = pat.exec(decodeURI(contentDisposition))
  let fileName = result && result[1]
  const URL = window.URL || window.webkitURL
  aLink.href = URL.createObjectURL(blob)
  // 如果Content-Disposition没有暴露，给文件一个默认名字
  if (fileName == null) fileName = '日报表'
  aLink.setAttribute('download', fileName)
  document.body.appendChild(aLink)
  aLink.click()
  // 释放URL对象
  window.URL.revokeObjectURL(aLink.href)
  document.body.removeChild(aLink)
}

import qs from 'qs'
export function downloadExcel(params) {
  const url = window.location.origin + '/dayReportToExcel/toExcel?' + qs.stringify(params)
  const aLink = document.createElement('a')
  aLink.setAttribute('download', '')
  aLink.setAttribute('target', '_blank')
  aLink.href = url
  aLink.click()
}

import qs from 'qs'
export function downloadExcel(params) {
  const url = window.location.origin + '/dayReportToExcel/toExcel?' + qs.stringify(params)
  window.open(url, '_blank')
}