项目场景：

后端：Java
前端：vue+element+axios

问题描述：

后端接口返回文件流，前端调用实现前端导出功能

解决方案：

1、接口

export function websiteStatementDownloadApi(data) {
   
     
  return request({
   
     
    url: websiteStatementDownloadUrl,
    method: 'post',
    data,
    responseType: "blob"
  })
}

2、request文件

service.interceptors.response.use(
  response => {
   
     
    const res = response.data
    if (response.headers['content-type'] === 'application/octet-stream;charset=utf-8') {
   
     
      return response
    }
    //  ......其他
    const isBlob = response.config.responseType === 'blob'
    if (!isBlob) {
   
     
      Message({
   
     
        message: (res.msg || 'Error'),
        type: 'error',
        duration: 5 * 1000
      })
    }
 }
),

3、调用接口组件

<el-button @click="fetchWebsiteStatementDownload">导出</el-button>

import {
   
      websiteStatementDownloadApi} from '@/api/home'
import moment from 'moment'

export default {
   
     
    data(){
   
     
        return{
   
     
          selectedDate: {
   
     
             startDate: moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format('yyyy-MM-DD'),
             endDate: moment().format('yyyy-MM-DD')
          }
        }
    },
    methods:{
   
     
        fetchWebsiteStatementDownload() {
   
     
          websiteStatementDownloadApi(this.selectedDate).then(res => {
   
     
            if (res.status === 200) {
   
     
              const blob = new Blob([res.data], {
   
     
                type: 'application/octet-stream',
              })
              const reader = new FileReader()
              reader.readAsDataURL(blob)
              reader.onload = (e) => {
   
     
                const link = document.createElement('a');
                link.download = `${
     
       this.selectedDate.startDate}to${
     
       this.selectedDate.endDate}.csv`;
                link.href = e.target.result;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.$message.success('下载成功')
              }
            }
          }).catch(e => console.log(e, 'error'))
        },
    }
}