VUE 后台返回文件流，前端实现模板下载

最新再写一个批量导入，模板下载的功能，今天就总结一下模板下载的功能效果，有一些博主说用a标签去下载，form表单去下载，这些针对我做的效果可能不是很理想，所以我就自己研究做了出来，希望可以帮到各位，废话不多说，看代码；

还有批量导入的code以及日志下载的code批量导入及日志下载_我的椰子啊的博客-CSDN博客新需求 新需求，要求模板下载以及批量导入，日志下载，以及对表格的单元格进行样式追加先看效果，两个按钮还是按照步骤走，如果走不通请私信我批量导入的按钮事件走起(套用了element的el-table组件)<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-uplo.https://blog.csdn.net/weixin_48215380/article/details/122199534

由于不想写样式，就直接借用的ElementUI

先看一下效果 

前端拿到后台的文件流

跟着我的步骤走：（批量导入的链接：批量导入，日志下载）

1. 点击事件 

   <el-button type="primary" plain size="mini" @click="handleDown">模板下载</el-button>

2.  在methods中填写事件函数

   handleDown () {
         getDlown()
           .then((response) => {
             const link = document.createElement('a') // 创建a标签
             const blob = new Blob([response], {
               type: 'application/vnd.ms-excel'
             }) // response就是接口返回的文件流
             const objectUrl = URL.createObjectURL(blob)
             link.href = objectUrl
             link.download = '用户批量导入模板' + '.xlsx' // 自定义文件名
             link.click() // 下载文件
             URL.revokeObjectURL(objectUrl) // 释放内存
           })
           .catch((error) => {
             console.log(error, '失败的回调')
           })
       }

3.   需要用到getDlown接口(getDlown是自己封装的，也可以不用我这样的写法，随个人意愿)

   /**
    * 模板下载
    * @params {} null
    * @returns
    */
   export function getDlown () {
     return request({
       url: '/sys/user/downUserTemplate',
       method: 'get',
       responseType: 'blob' //这个一定要写，不然识别不出来
     })
   }
   

4.  在这个时候会有一个坑，那就是请求头的Content-type可能不匹配，这个需要在axios请求封装文件内修改一下，这个里边我们只需要把上面方法内的blob的type匹配就可以，如果不写这个会出现一个缺陷，那就是我们方法内的.then()内部的函数不执行，只执行.catch()内部的错误，所以在axios内一定要修改，这样就执行.then()内部的数据了。

   if (response.headers['content-type'] === 'application/octet-stream;charset=utf-8' || response.headers['content-type'] === 'multipart/form-data;charset=utf-8' || response.headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8') {
         return res
       }