一、封裝js文件

這個(gè)文件是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('&')
}

二、封裝公用的下載方法

里面可以傳入一些參數(shù)和做了IE瀏覽器的判斷，IE瀏覽器下載的時(shí)候，不能使用a標(biāo)簽，所以如果不做判斷是沒(méi)有反應(yīng)的。

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

// 請(qǐng)求下載文件
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) {
      // 這里做一個(gè)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('下載數(shù)據(jù)失?。?)
      }
    }
    if (method.toUpperCase() === 'POST') {
      xhr.send(JSON.stringify(data))
    } else {
      xhr.send()
    }
  })
}

三、在接口中使用

import request from '@/utils/request'
import * as download from '@/utils/download'
// 導(dǎo)出模板
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項(xiàng)目中使用

大概就是這些。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-565540.html

import { exportTemplate} from '../../api/permission/customCheck'
    handleUploadTemplate() {
      const obj = {}
      this.loading = true
      exportTemplate(obj, '測(cè)試' + new Date().getTime() + '.xlsx').then(response => {
        if (response) {
          this.msgSuccess('導(dǎo)出成功')
          this.loading = false
        } else {
          this.msgError(response.msg)
          this.loading = false
        }
      })
    },

到了這里，關(guān)于vue excel文件下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！