前后端联调：下载接口的调用

下载接口的调用

封装与导出下载方法

// url:文件地址 filename:想要修改为的名称
export function download (url, filename) {
  // if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
  //   var form = document.createElement('form')
  //   form.action = url
  //   document.body.appendChild(form)
  //   form.submit()
  // } else {
  getBlob(url, function (blob) {
    saveAs(blob, filename)
  })
  // }
}

export function getBlob (url, cb) {
  const instant = axios.create({
    withCredentials: true,
    timeout: 600000,
    headers:{
      'token':store.getters.token
    }
  })
  instant.get(url, {
    responseType: 'blob' // 二进制流
  }).then(response => {
    cb(response.data)
  })
  // var xhr = new XMLHttpRequest()
  // xhr.open('GET', url, true)
  // xhr.responseType = 'blob'
  // xhr.onload = function () {
  //   if (xhr.status === 200) {
  //     cb(xhr.response)
  //   }
  // }
  // xhr.send()
}
export function saveAs (blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    var link = document.createElement('a')

    var body = document.querySelector('body')

    link.href = window.URL.createObjectURL(blob)
    link.href = xss(link.href,{
      whiteList: [], // 白名单为空，表示过滤所有标签
      stripIgnoreTag: true, // 过滤所有非白名单标签的HTML
      stripIgnoreTagBody: ["script"] // script标签较特殊，需要过滤标签中间的内容
    })

    link.download = filename

    // fix Firefox

    link.style.display = 'none'

    body.appendChild(link)

    link.click()

    body.removeChild(link)

    window.URL.revokeObjectURL(link.href)
  }
}

export function getAllItem (id, listTree) {
  if (!id) {
    return ''
  } else {
    const firstId = id.split(',')[0]
    const currentList = listTree.filter(item => item.value == firstId)
    if (currentList.length > 0) {
      const parentList = listTree.filter(item => item.value == currentList[0].parentId)
      if (parentList.length > 0) {
        const currentId = parentList[0].value + ',' + id
        return getAllItem(currentId, listTree)
      } else {
        return id
      }
    } else {
      return id
    }
  }
}
// url:文件地址 filename:想要修改为的名称
// export function download (url, name) {
//   if (window.navigator.msSaveBlob) {
//     try {
//       var bstr = atob(url.split(',')[1])
//       var n = bstr.length
//       var u8arr = new Uint8Array(n)
//       while (n--) {
//         u8arr[n] = bstr.charCodeAt(n)
//       }
//       var blobObject = new Blob([u8arr])
//       window.navigator.msSaveBlob(blobObject, name)
//     } catch (e) {}
//   } else {
//     const a = document.createElement('a')
//     const event = new MouseEvent('click')
//     a.download = name
//     a.href = url
//     a.dispatchEvent(event)
//     a.remove()
//   }
// }

使用与调用

先导入

//导入封装方法文件
import { 方法名} from "方法封装地址";
//导入node自带模块qs
import Qs from "qs";

在调用

 //下载
    点击事件名() {
    //下载判断提示
      if (!this.isDown) {
        this.showMsg("无数据信息！", "error");
        return;
      }
      if (this.total > 20000) {
        this.showMsg("每次下载数据不能超过2万条!", "error");
        return;
      }
      //调用
      const url =
        process.env.VUE_APP_API_URL +
        "/statistic/trl/perform/download?" +  //后端接口地址
        Qs.stringify(this.formItem);   //node模块qs
      download(url, "个人业绩统计列表.xlsx"); //调用
    },