前端下载文件功能实现

若后端的导出下载接口时post类型则前端实现
1、先在请求的时候使用isBlob对后端传来的二进制流进行处理，则在请求的时候的需要在请求头部加多一行代码

const updowm = (params = {}) => {
  return request({
    url: '',
    method: 'post',
    data: params,
    responseType: 'blob',//加多此行
  })
};

2、封装公共导出方法

// file：文件流；
//excelName:文件名称
export default function templateDownload(file, excelName) {
  const url = window.URL.createObjectURL(new Blob([file.data]))
  if (window.navigator.msSaveOrOpenBlob) { 
    window.navigator.msSaveOrOpenBlob(file.data, `${excelName}.xls`)
  } else {
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `${excelName}.xls`)
    document.body.appendChild(link)
    link.click()
  }
}

3、vue中的使用

<template>
 <div class='export'>
   <button @click='templateDownload'>模板下载</button>
 </div>
</template>
<script>
import exportExcel from 'exportExcel',
export default {
 methods:{
 templateDownload() {
      templateDownload(param).then(res => {
        exportToExcel(res, 'excelName')
      })
    },
  }
}
</script>