1、解决vue调用后端下载Excel文件出现乱码问题

这是我定义的后台接口

//导出数据接口
export function getZTPJExportData(data){
    return request({
        url:"/sxc/newEnergyPowerForecast/overallEvaluation/doExportData",
        method:"get",
        params:data,
        responseType:'blob',//将文件流转成blob对象
        noErrorMsg:true
    })
}

Vue页面代码

import {getZTPJExportData} from "../../../api/module/newEnergy"; //引入后台接口

methods里面的导出文件方法

//导出
ExportData(){
    getZTPJExportData({
        czlx: this.tabPositionName,
        dgfw: this.tabPositions,
        pdate: this.pdates,
        pdateType: this.pdateType,
        tjlx: this.tjlxName,
    }).then((response)=>{
        //处理返回的文件流
        const contentDisposition = response.headers['content-disposition'];
        var fileName;
        if (contentDisposition) {
            fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1]);
        }
        const blob = new Blob([response.data])
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        window.setTimeout(function() {
            window.URL.revokeObjectURL(blob)
            document.body.removeChild(link)
        }, 0)
    }).catch(() => {
    })
},

如果responseType设为blob的话，按理来说返回的文件流将会被转成blob对象，而不是文件流，但是无论怎么设置都没有转成blob对象，我后来才发现最坑的是mockjs的引入，前端在后端没有接口之前会使用mockjs,但是这个mockjs会影响responseType的设置转换，且拦截下载的数据最终导致乱码，项目中注释掉mockjs即可实现成功blob的转换。