vue中使用文件流Blob导出表格、及解决乱码问题

今天在看之前的博客文章时，少了一篇数据流导出表格的博客，写一篇文章，记录一下

1.首页在导出时一定要记得加请求头

// 批量导出
export const batchExport = (args = {}) => {
  return axios.request({
    url: '/logistics-engine/firstBatOrder/export',
    method: 'post',
    responseType : 'blob', // 重要
    data: {
      method: 'searchFirstBatOrder',
      args: JSON.stringify(args)
    }
  })
}

不加请求头responseType会出现乱码情况,如图所示

responseType : 'blob'

所以一定要记得加请求头

2.导出文件流方法

batchExport() { // 导出数据方法
	let searchTemp = this.args // 要传入的参数
	const _this = this
	batchExport(searchTemp.search).then(function(res) { // 导出流-接口方法
          let blob = new Blob([res.data])// res.data为后端传的流文件
          let downloadFilename = '头程批次管理' + _this.$initTime(new Date()) + '.xlsx'// 设置导出的文件名
          if (window.navigator && window.navigator.msSaveOrOpenBlob) { // 兼容ie浏览器
            window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
          } else {
            // 谷歌,火狐等浏览器
            let url = window.URL.createObjectURL(blob)
            let downloadElement = document.createElement('a')
            downloadElement.style.display = 'none'
            downloadElement.href = url
            downloadElement.download = downloadFilename
            document.body.appendChild(downloadElement)
            downloadElement.click()
            document.body.removeChild(downloadElement)
            window.URL.revokeObjectURL(url)
          }
          _this.$Message.success('导出成功！')
        })
}

3. 方法封装、及详细介绍

函数用法

batchExport() { // 导出数据方法
	let searchTemp = this.args // 要传入的参数
	const _this = this
	batchExport(searchTemp.search).then(function(res) { // 导出流-接口方法
          _this.exportBoble(res, '头程批次管理')
        })
}

是不是简单多了，中间你可以自己做一些逻辑处理！

导出公用方法

注意：_this.$initTime此方法是我自己封装的时间方法，是moment插件里的时间处理函数
你也可以自己选择要不要它，或者改用自己方法

exportBoble(res, val = '') { // 导出公用方法
      const _this = this
      let blob = new Blob([res.data])// response.data为后端传的流文件
      let downloadFilename = val + _this.$initTime(new Date()) + '.xlsx'// 设置导出的文件名
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容ie浏览器
        window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
      } else {
        // 谷歌,火狐等浏览器
        let url = window.URL.createObjectURL(blob)
        let downloadElement = document.createElement('a') // 创建a标签
        downloadElement.style.display = 'none' // 隐藏
        downloadElement.href = url // 下载路径/引入路径
        downloadElement.download = downloadFilename // 下载文件名字
        document.body.appendChild(downloadElement) // 插入当前a标签
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完之后移除
        window.URL.revokeObjectURL(url)
        // 这块可以根据自己的ui组件库去提示
        _this.$Message.success('导出成功！') 
      }
    },

$initTime方法

import moment from 'moment'

4.导出成功之后的文件