关于vue.js:前端将后端返回的文件流转为excel并下载

在日常开发中，咱们可能会遇到导出excel的状况，而后端此时给咱们返回的是一个文件流，须要前端将文件流转为url地址进行下载。

能够将这个办法封装成一个工具类，不便其余中央调用，我这里放到了utils.js外面

import axios from 'axios'import Vue form 'vue'/** * 依据后端返回的文件流转为excel导出 * @param {Object} data */export function exportExcelMethod(data) {  axios({    method: data.method,    url: `${data.url}${data.params ? '?' + data.params : ''}`,    responseType: 'blob',    headers: {      token: data.token    },    timeout: 8000,    data: data.data  })    .then((res) => {      const link = document.createElement('a')      const blob = new Blob([res.data], {        type: 'application/vnd.ms-excel'      })      link.style.display = 'none'      link.href = URL.createObjectURL(blob)      // link.download = res.headers['content-disposition'] //下载后文件名      link.download = data.fileName //下载的文件名      document.body.appendChild(link)      link.click()      document.body.removeChild(link)      Vue.prototype.$message.success('导出胜利！')    })    .catch((error) => {      Vue.prototype.$message.error('参数谬误！')    })}

<el-button type="primary" plain size="small" @click="exportLog">导出</el-button>

import { exportExcelMethod } from '@/utils'exportLog() {    const url = this.baseUrl    const data = this.data    const myObj = {      method: 'post',      url: url,      fileName: 'xxx日志',      token: this.token,      data: { data }    }    exportExcelMethod(myObj)  }