方式一
 
原生js blob方式
 
downloadPlanData(planListIndex){
	let url_post = '/planFile';
	let params_post = {
	  planId: planListIndex,
	};
	// 利用a标签自定义下载文件名
	const link = document.createElement('a')
	axios.post(url_post, params_post, {responseType: 'arraybuffer'}).then(res => {
	  let filename = res.headers['content-disposition'].split('; ')[1].split('=')[1]
	  // 创建Blob对象，设置文件类型
	  let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
	  var downloadElement = document.createElement('a');
	  var href = window.URL.createObjectURL(blob); // 创建下载的链接
	  downloadElement.href = href;
	  downloadElement.download = filename; // 下载后文件名
	  document.body.appendChild(downloadElement);
	  downloadElement.click(); // 点击下载
	  document.body.removeChild(downloadElement); // 下载完成移除元素
	  window.URL.revokeObjectURL(href); // 释放掉blob对象
	})
}

前端代码：
 import { downloadMedicalCooperOrgList } from ‘@/api/medicalCooperOrgManger.js’
 import Vue from ‘vue’
 // 导出excel文件
 export default{
 Export(path, fileName, data) {
 return downloadMedicalCooperOrgList(path, data).then(response => {
 const blob = response.data
 const url = window.URL.createObjectURL(new Blob([response.data], { type: ‘application/vnd.ms-excel’ }))
 if (‘download’ in document.createElement(‘a’)) { // 非IE下载
 const elink = document.createElement(‘a’)
 elink.download = fileName
 elink.style.display = ‘none’
 elink.href = url
 document.body.appendChild(elink)
 elink.click()
 URL.revokeObjectURL(elink.href) // 释放URL 对象
 document.body.removeChild(elink)
 } else { // IE10+下载
 navigator.msSaveBlob(blob, fileName)
 }
 }).catch(() => {
 new Vue().KaTeX parse error: Expected 'EOF', got '}' at position 27: …or('下载失败') }̲) } } 后端代码： i…message.error(‘下载失败’)
 })
 }
 }
 通过这些还是不能解决乱码问题，
 前端在后端没有借口之前会使用mockjs,但是这个js会拦截下载的数据最终导致乱码，把引入这个js的地方注释掉就行了
 这是我引入的地方
 

项目中使用vue，在下载excel文件的时候，遇到了乱码问题，困扰了好久，查了网上的很多资料都没用，后来查阅了一篇博客，解决了问题。后端是流的形式返回的。
 
我尝试把返回类型（responseType: 'blob'）写在接口调用的地方，发现还是乱码。
 
后来把返回类型（responseType: 'blob'）写在接口定义的地方就好了，如图1
 
 
图1
 
 
图2

问题出现原因：
 
使用为Vue axios前端请求下载 后端EasyExcel进行文件下载
 
1. PostMan进行后端接口访问正常下载，并可以打开文件，内容完整清晰。
 
2. 进行路径直接访问也能完整下载
 
3.利用Vue前端下载，不仅文件下载不下来而且还是乱码
 
查找结果：
 
1. 大部分为没有在前端请求下载时没有加 responseType = "blob" ,可是自己加了半天还是一样。看后端的下载格式 ，也没发现啥问题
 
 
2. 继续查找原因，还有一种情况是前端Vue框架引用了Mock模块导致 请求类型失效。一顿查找压根没用到mock，无果。
 
3.第三种原因是我的根本原因，因为使用了axios进行请求接口，在进行封装的axios的时候，会导致axios请求下载接口导致responseType失效，果断换为：成功下载
 
axios({ // 用axios发送get请求
        method: 'get',
        url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
        responseType: 'blob', // 表明返回服务器返回的数据类型
        headers: {
      'Content-Type': 'application/json'
      }
    }).then(res => { // 处理返回的文件流
      //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
      const blob = new Blob([res.data],{type: "application/vnd.ms-excel"}); 
      const fileName = '字典数据.xlsx';//下载文件名称
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    })




axios({ // 用axios发送post请求
        method: 'get',
        url: 'http://localhost:8202/admin/cmn/dict/export-dict', // 请求地址
        data: form,
        responseType: 'blob', // 表明返回服务器返回的数据类型
        headers: {
      'Content-Type': 'application/json'
      }
    }).then(res => { // 处理返回的文件流
      //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
      const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});      
      const fileName = '字典数据.xlsx';//下载文件名称
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    })
 
感悟：一个小细节耽误自己了好久时间，所以在学编程的路上一定要弄明白原理 不然很容易绊脚。加油打工人！！！