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']);
	}