vue excel文件下载

一、封装js文件

这个文件是utils/index.js文件里面的，后面要用到。

/**
 * @param {Object} json
 * @returns {Array}
 */
export function param(json) {
  if (!json) return ''
  return cleanArray(
    Object.keys(json).map(key => {
      if (json[key] === undefined) return ''
      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
    })
  ).join('&')
}

二、封装公用的下载方法

里面可以传入一些参数和做了IE浏览器的判断，IE浏览器下载的时候，不能使用a标签，所以如果不做判断是没有反应的。

import { param } from '@/utils'
import { getToken, getSid } from '@/utils/auth'

// 请求下载文件
export function blob(url, method = 'GET', data, fileName) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    if (method.toUpperCase() === 'GET') {
      url = `${url}?${param(data)}`
    }
    xhr.open(method, url, true)
    xhr.setRequestHeader('uiticket', getToken())
    xhr.setRequestHeader('sid', getSid() || '')
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.responseType = 'blob'
    xhr.onload = function(data) {
      if (this.status === 200) {
      // 这里做一个IE浏览器的判断
        if (window.navigator && window.navigator.msSaveBlob) {
          var blobObject = new Blob([this.response]);
          window.navigator.msSaveBlob(blobObject, `${fileName}.xlsx`);
        } else {
          const blob = this.response
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          link.download = fileName
          link.style.display = 'none'
          document.body.appendChild(link)
          link.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
          resolve(url)
        }
      } else {
        reject('下载数据失败！')
      }
    }
    if (method.toUpperCase() === 'POST') {
      xhr.send(JSON.stringify(data))
    } else {
      xhr.send()
    }
  })
}

三、在接口中使用

import request from '@/utils/request'
import * as download from '@/utils/download'
// 导出模板
export function exportTemplate(data, fileName) {
  const url = (process.env.ENV === 'production' ? window.location.host + process.env.VUE_APP_BASE_API : process.env.VUE_APP_BASE_API) + 'xxxxxxxxURL'
  return download.blob(url, 'POST', data, fileName)
}

四、在vue项目中使用

大概就是这些。

import { exportTemplate} from '../../api/permission/customCheck'
    handleUploadTemplate() {
      const obj = {}
      this.loading = true
      exportTemplate(obj, '测试' + new Date().getTime() + '.xlsx').then(response => {
        if (response) {
          this.msgSuccess('导出成功')
          this.loading = false
        } else {
          this.msgError(response.msg)
          this.loading = false
        }
      })
    },