使用axios，导出文件时，接口正常，返回乱码问题修复

本文链接：https://blog.csdn.net/ZoeLinJF/article/details/105838564

导出接口，点击接口是正常调用，请求方式和地址都没错。正常情况是直接下载该文档，但是返回结果是乱码（如下图）。
解决方法：
– 修改请求配置
– 返回结果接收调整

import axios from 'axios';
import { getToken } from '@/utils/utils';
export function exportFile(url, params) {
	// 使用的是element-ui框架，添加loading
  let loadingInstance = Loading.service({ fullscreen: false, text: '加载中...' });
  axios({
    method: 'post',
    url: process.env.VUE_APP_BASE_API + url,
    data: params,
    headers: {
      token: getToken(),
    },
    responseType: 'arraybuffer', // 代表内存之中的一段二进制数据 必须加
  }).then(res => {
  	// 从返回的headers中拿到文件名称
    let filename = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1]).replace(/\"/g, '');
    
    // 使用Blob对象
    let blob = new Blob([res.data], { type: 'application/vnd' });
    //  URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
    var blobURL = window.URL.createObjectURL(blob)
    
    // 创建a标签，调用其点击事件，模拟点击下载
    var tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', filename)
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    document.body.appendChild(tempLink)
    tempLink.click()
    
    // 下载完毕移除a标签，移除url对象
    document.body.removeChild(tempLink)

	// 释放URL对象
    window.URL.revokeObjectURL(blobURL)
	
	// 关闭loading效果
    loadingInstance.close();
  })
}