前端vue对接后端导出excel文件的原理和教程

前言：前面我们讲过了前端怎么读取excel文件里面的内容数据问题，这边讲解前端怎么对接后端接口并导出excel文件，功能简单易实现。

1.导出excel文件的原理：

后端通过接口把文件流的数据返回给前端，前端再模拟一个下载的动作，进行文件数据的转换并且下载到本地。是不是很简单哈哈哈哈哈哈哈！！！！但是这里我们需要着重讨论的是，我们需要通过blob的数据格式（javaScript对象），利用createObjectURL方法，将blob对象创建成blob URL，然后模拟点击下载。

        我们先介绍一下Blob对象（这里是javaScript官网） Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。（官网原文）这一对象能让我们更好的操作二进制数据而更多的属性和方法介绍点我给你们的地址.........

导出excel文件功能代码如下：

// 下载
download() {
  // 调用下载模板函数（传递文件名和地址）
  this.downloadTemplate('文件名', '/sys/exportBuyCarCouponInfoExcel')
},
// 下载模板
downloadTemplate(templateName, subURL) {
  // element-ui的loading
  const loading = this.$loading({ target: '.loading-area' })
  // axios请求
  axios({
    method: 'post',
    url: process.env.VUE_APP_BASE_API + subURL,
    data: {
      // 携带的参数
      data: ''
    },
    responseType: 'arraybuffer'
  }).then(res => {
    // 打印接口数据
    console.log(res)
    // 请求结束关闭loading
    loading.close()
    // 创建a标签
    const elink = document.createElement('a')
    构建Blob对象
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
    // 模拟下载
    const objectUrl = URL.createObjectURL(blob)
    elink.setAttribute('href', objectUrl)
    elink.setAttribute('download', templateName + '.xls')
    elink.click()
    document.body.removeChild(elink)
  })
}

导出excel文件是很简单的一个功能，这里的实现用不到几行代码，大家可以自己去试试。