Vue结合blob导出Excel最佳处理方案

设置api接口

export function exportExcel(params){
	return request({
		url:'填写url地址',
		method:'post',
		data:{
			"body":params //传递给后端的参数
		},
		responseType:'blob' //必须填写，防止接收的流乱码
	})
}

对request的处理

在这里主要是进行一个axios实例的创建，以及拦截处理

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

// 创建axios实例
let baseURL = ''
export const BaseURL = baseURL
const service = axios.create({
    baseURL: baseURL, // api的base_url
    withCredentials: true,
    timeout: 30000, // 请求超时时间
})

axios.withCredentials = true

service.interceptors.request.use(
    config => {
        config.headers['X-Requested-With'] = "XMLHttpRequest"
        config.headers['content-type'] = "text/plain; charset=UTF-8"
        return config
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error)
    })

// respone拦截器
service.interceptors.response.use(
    response => {
    	// 单独对blob的处理
    	if（response.config.responseType == 'blob'）{
    		return response.data
		}
		// 非blob类型的处理,根据自己公司业务做处理
        if (response.data.head.code !== '0000') {
            Message({
            	message:'错误提示信息',
            	type:'error',
            	showClose:true //配置手动关闭错误提示信息，不需要可以关闭
			})
			return Promise.reject('error')
        }else{
        	return response.data
        }
)

export default service

发起导出请求处理

params 是需要传给后端的参数
exportExcel(params).then(response=>{
	const type = response.type || bull;
	const realType = "application/vnd.ms-excel";
	let blob = new Blob([response],{type:"text/csv"});
	// for IE
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, `下载.xls`);
    }
    // for Non-IE (chrome, firefox etc.)
    else {
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        var url = window.URL.createObjectURL(blob);
        a.href =  url;
        a.download = `下载.xls`;
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    }
	// blob异常处理
	if(type.includes('application/json')){
		var reader = newFileReader();
		reader.addEventListener("loadend",function(){
			console.log(JSON.parse(reader.result));
			// 在这里对异常信息处理，弹窗等操作
		});
		reader.readAsText(blob,['utf-8']);
	}