前端处理二进制流文件导出为excel表

将后端返回的二进制流文件 导出为excel表
用的时候直接调用showConfirm函数即可
最后效果
在这里插入图片描述

export function getExport(param) {
    
    
    get('/api/xdata/v1/basic/auth/excel', {
    
     ...param }).then((res) => {
    
    
        // let name = getFileName(url);

        let name = 'export.xlsx';
        console.log('res', res);
        // let u = window.URL.createObjectURL(new Blob([res]));
        const type = 'application/vnd.ms-excel;charset=utf-8'; //excel文件
        let u = window.URL.createObjectURL(new Blob([res], {
    
     type: type }));

        let a = document.createElement('a');
        a.download = name;
        a.href = u;
        console.log(a);
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
        // setTimeout(myDlWarn, 0);
    });
}
export function showConfirm(text, exportParams) {
    
    
    confirm({
    
    
        title: `您确认要导出${
      
      text}`,
        icon: <ExclamationCircleOutlined />,
        content: '',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
    
    
            getExport(exportParams);
        },
        onCancel() {
    
    
            console.log('Cancel');
        },
    });
}

get接口是自己封装的,封装如下

/**
 * 从 cookie 中获取数据
 * @param {string} cname cname
 */
export const getCookie = (cname) => {
    
    
    var name = cname + '=';
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
    
    
        var c = ca[i].trim();
        if (c.indexOf(name) === 0) {
    
    
            return c.substring(name.length, c.length);
        }
    }
    return '';
};
const ajax = (method, url, data, options = {
     
     }) => {
    
    
    const isPost = method === 'post';
    const isPut = method === 'put';
    const isPatch = method === 'patch';
    const isGet = method === 'get';

    const sentOptions = {
    
    
        url,
        method,
        withCredentials: true, // 允许跨域
        credentials: 'include', 
        headers: {
    
    
            'X-Request-By': 'ERApplication',
            'X-Requested-With': 'XMLHttpRequest',
            'X-Region': 'bj',
            'X-From': 'web',
        },
        ...options,
    };

    if (isPost || isPatch) {
    
    
        sentOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        sentOptions.data = JSON.stringify(data);
    } else if (isPut) {
    
    
        sentOptions.data = JSON.stringify(data);
    } else if (isGet) {
    
    
        sentOptions.headers['Content-Type'] = 'utf-8';
        sentOptions.params = data;
    }

    return new Promise((resolve, reject) => {
    
    
        axios(sentOptions)
            .then((response) => {
    
    
                resolve(response.data);
            .catch((error) => {
    
    
                console.log('catch');
                reject(error);
            });
    });
};
export const get = (url, data = {
     
     }) => {
    
    
    return ajax('get', BASE_URL + url, data, {
    
     responseType: 'blob' });
};

猜你喜欢

转载自blog.csdn.net/weixin_43569396/article/details/125644430