vue项目中的文件导出功能

在项目中，一般的文件导出都是后端把要导出的文件写成一个文件流在调接口的时候返回给前端；

 <el-button type="primary" icon="el-icon-download" @click="exportExcel()">导出</el-button>

common.js封装一个公共方法：

export function downFile(data, fileName) {
    console.log('data===', data)  //接口返回的信息
    console.log('fileName===', fileName)  // 定义的文件名
    const blob = data
  	if (blob && blob.size === 0) {
	      alert('内容为空，无法下载')
	      return
 	} else {
	      const link = document.createElement('a')
	      link.href = URL.createObjectURL(blob)
	      link.download = fileName
	      document.body.appendChild(link)
	      link.click()
	      window.setTimeout(function() {
		        URL.revokeObjectURL(blob)
		        document.body.removeChild(link)
	     }, 0)
	 }
}

 //引入接口
 import * as Api from '@/api/index'
 // 点击导出按钮导出
 exportExcel() {
        const now = dayjs().format('YYYYMMDDHHmmss')
        const params = {
          empId: this.userId,
          beginDate: this.form.beginDate,
          endDate: this.form.endDate  
        }
        Api.exportExcel(params).then((res) => {
          this.downFile(
            res.data,
            `导出报表-(${now}).xlsx`
          )
        })
      } 
    }

// 封装的接口 **导出文件的接口一般要加一个responseType: 'blob'参数**,
export function exportExcel(data) {
  return request({
    url: BASE_API + '/..../.../exportExcel',
    method: 'post',
    responseType: 'blob',
    data
  })
}