vue.js前端实现excel表格导出和获取headers里的信息

前段时间写过一篇文章基于element实现后台管理系统，并提到excel表格导出功能，可能描述不是很详细，现在单独整理列出。

后端提供的接口：

// 下载分拣列表
export function getAssormentExport(params) {
  return request({
    url: '/manage/health/assorment/export?ids=' + params,
    responseType: 'arraybuffer', // 代表内存之中的一段二进制数据 必须加
    method: 'get'
  })
}

vue：点击按钮调用接口

<el-button type="primary" size="mini" @click="addexport()">导出选中</el-button>

script：

    // 导出选中
    addexport() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          showClose: true,
          message: '未选中数据',
          type: 'error'
        })
        return
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id)
      } // push一个新的数组，存储需要导出信息的ID并传给接口实现数据返回
      getAssormentExport(this.ids).then(
        function(response) {
          const filename = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1]) || '分拣表.xlsx'
          this.fileDownload(response.data, filename) // response.data是后端返回的二进制数据流，filename是获取到的导出文件名，获取失败使用默认值
          this.ids = []
        }.bind(this)
      ).catch(
        function(error) {
          this.$message({
            showClose: true,
            message: error,
            type: 'error'
          })
          this.ids = []
        }.bind(this)
      )
    },
    fileDownload(data, fileName) {
      const blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      const filename = fileName || 'filename.xlsx'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        var blobURL = window.URL.createObjectURL(blob)
        var tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },

查看调用接口返回的信息

备注：

1.response返回了包含响应头所带的所有数据，可以使用console.log(response）查看打印数据，但是打印出来的数据只能拿到默认的响应头，这里有个需要注意的地方。

• Cache-Control

• Content-Language

• Content-Type

• Expires

• Last-Modified

• Pragma

如果想让浏览器能访问到其他响应头的话，需要后端在服务器上设置Access-Control-Expose-Headers

Access-Control-Expose-Headers : 'content-disposition'

后端大致写法：

headers.add("Access-Control-Expose-Headers", "Content-Disposition");

这样response.headers['content-disposition'].split(';')[1].split('=')[1] 就能取到接口返回的文件名称了。

2. decodeURI的使用

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

实例

在本例中，我们将使用 decodeURI() 对一个编码后的 URI 进行解码：

<script type="text/javascript">

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

</script>

输出：

http://www.w3school.com.cn/My%20first/
http://www.w3school.com.cn/My first/